从选择框中删除选定的选项
[英] Remove the selected option from select box
本文介绍了从选择框中删除选定的选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在制作带有角度形式的角度应用程序.
这里我给出了一个带有输入字段的表单 first name and last name 它将始终显示..
在那之后，我有孩子，点击添加按钮时会显示这些孩子，点击删除按钮时孩子会被删除.
截至目前一切正常.
在这里，我正在将数据修补到选择框中单击选项的输入中.. 必要的输入被修补..
HTML:
<form (ngSubmit)="onSubmit()" [formGroup]="form"><div *ngFor="let question of questions" class="form-row"><ng-container *ngIf="question.children"><div [formArrayName]="question.key"><div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i"><div *ngFor="let item of question.children"><app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
<select multiple (change)="changeEvent($event)"><option *ngFor="let opt of people" [value]="opt.key">{{opt.value}}</option></选择>
</ng-容器><ng-container *ngIf="!question.children"><app-question [question]="question" [form]="form"></app-question></ng-容器>
<div class="form-row"><!-- <button type="submit" [disabled]="!form.valid">保存</button>-->
</表单><br><!-- 需要添加和删除按钮.. <br><br>--><button (click)="addControls('myArray')">添加</button><button (click)="removeControls('myArray')">删除 </button><br/><br/><预>{{form?.value|json}}
TS:
changeEvent(e) {如果(e.target.value == 1){让 personOneChild = [{ property_name : "属性一" },{ property_name : "属性二" },]for (let i = 0; i q.key == control);让孩子=问题?question.children : null;如果(儿童)(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))}removeControls(控制:字符串){let array = this.form.get(control) as FormArray;array.removeAt(array.length - 1);} 清除工作stackblitz :
在这里你可以看到我已经删除了父级是模板三的属性名称三，即使我删除了它的子级，模板三仍然显示在选择框中
解决方案
首先，获取对 select 的引用，如下所示:
HTML:
<option *ngFor="let opt of people" [value]="opt.key">{{opt.value}}</option></选择> TS:
import { ViewChild } from '@angular/core';//...@ViewChild('mySelect') 选择；然后，在你的remove函数中，检查是否所有元素都被移除了，如果已经移除，将select的value设置为null
if (array.length === 0) {this.select.nativeElement.value = null;}这里是StackBlitz 的一个分支
I am making angular application with angular form.
Here i have given a form with input fields first name and last name which will always showing..
After that i am having children which will be displayed upon clicking the add button and the children will get removed on click remove button.
As of now everything works fine.
Here i am making patching of data to the inputs on click option from select box.. The neccessary inputs gets patched..
HTML:
<div>
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<ng-container *ngIf="question.children">
<div [formArrayName]="question.key">
<div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
<div *ngFor="let item of question.children">
<app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
</div>
</div>
<select multiple (change)="changeEvent($event)">
<option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>
</select>
</div>
</ng-container>
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
</div>
<div class="form-row">
<!-- <button type="submit" [disabled]="!form.valid">Save</button> -->
</div>
</form> <br>
<!-- Need to have add and remove button.. <br><br> -->
<button (click)="addControls('myArray')"> Add </button>
<button (click)="removeControls('myArray')"> Remove </button><br/><br/>
<pre>
{{form?.value|json}}
</pre>
</div>
TS:
changeEvent(e) {
if (e.target.value == 1) {
let personOneChild = [
{ property_name : "Property one" },
{ property_name : "Property two" },
]
for (let i = 0; i < personOneChild.length; i++) {
this.addControls('myArray')
}
this.form.patchValue({
'myArray': personOneChild
});
}
if (e.target.value == 2) {
let personTwoChild = [
{ property_name : "Property three" },
{ property_name : "Property four" },
{ property_name : "Property five" },
]
for (let i = 0; i < personTwoChild.length; i++) {
this.addControls('myArray')
}
this.form.patchValue({
'myArray': personTwoChild
});
}
}
addControls(control: string) {
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
}
removeControls(control: string) {
let array = this.form.get(control) as FormArray;
array.removeAt(array.length - 1);
}
Clear working stackblitz : https://stackblitz.com/edit/angular-x4a5b6-fnclvf
You can work around in the above link that if you select the person one option then the value named property one and property two gets binded to the inputs and in select box the property one is highlighted as selected..
The thing i am in need is actually from here ,
I am having a remove button, you can see in demo.. If i click the remove button, one at last will be got removed and again click the last gets removed..
Here i am having two property one and two, if i remove both the inputs with remove button, the the highlighted value person one in select box needs to get not highlighted .
This is actually my requirement.. If i remove either one property then it should be still in highlighted state.. Whereas completely removing the both properties it should not be highlighted..
Hope you got my point of explanation.. If any needed i am ready to provide.
Note: I use ng-select for it as i am unable implement that library, i am making it with html 5 select box.. In ng-select library it will be like adding and removing the option.. Any solution with ng-select library also appreciable..
Kindly help me to achieve the result please..
Real time i am having in application like this:
Selected three templates and each has one property with one,two,three respectively:
If choose a dropdown then the property values for the respective will get added as children.
Here you can see i have deleted the property name three for which the parent is template three and the template three still shows in select box even though i removed its children
解决方案
Firstly, get a reference to the select, like so:
HTML:
<select multiple (change)="changeEvent($event)" #mySelect>
<option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>
</select>
TS:
import { ViewChild } from '@angular/core';
// ...
@ViewChild('mySelect') select;
Then, in your remove function, check if all elements have been removed, and if they have, set the value of the select to null
if (array.length === 0) {
this.select.nativeElement.value = null;
}
Here is a fork of the StackBlitz
这篇关于从选择框中删除选定的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
