从选择框中删除选择的选项 [英] Remove the selected option from select box
问题描述
我正在用角形进行角形应用.
在这里，我给了一个带有输入字段first name and last name的表格，该表格将始终显示..
此后，我有了孩子，单击添加按钮时将显示这些孩子，而单击删除"按钮将删除孩子.
到目前为止，一切正常.
在这里，我正在将数据打补丁到选择框中的单击选项上的输入..必要的输入被打补丁了.
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);
}
清除正在工作的堆栈闪电: https://stackblitz.com/编辑/angular-x4a5b6-fnclvf
您可以在上面的链接中解决，如果您选择一个人，则名为property one and property two的值将绑定到输入，并且在选择框中将property one突出显示为选定..
我需要的东西是实际上是从这里的，
我有一个删除按钮，您可以在演示中看到.如果我单击该删除按钮，则最后一个将被删除，然后再次单击最后一个被删除.
在这里，我有两个属性one and two，如果我同时使用删除按钮删除了两个输入，则选择框中的突出显示值person one需要 以获得未突出显示.
这实际上是我的要求..如果我删除一个属性，则它应该仍处于突出显示状态..而完全删除这两个属性，则不应该突出显示..
希望您能得到我的解释.如果有需要，我随时可以提供.
注意:由于无法实现该库，因此我使用了 ng-select ，因为它是使用html 5 select框制作的..在 ng-select 库就像添加和删除该选项一样.任何解决方案带有ng-select库也很明显.
请帮助我达到目标..
我在这样的应用程序中实时运行:
选择了三个模板，每个模板具有一个属性，分别具有一个，两个，三个:
如果选择一个下拉菜单，则各自的属性值将作为子项添加.
在这里您可以看到我删除了属性名称3，其父级为模板3，即使删除了其子级，模板3仍显示在选择框中.
首先，获得对select的引用，如下所示: HTML: TS: 然后，在删除功能中，检查是否已删除所有元素，如果已删除，请将 I am making angular application with angular form. Here i have given a form with input fields 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: TS: 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 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 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: TS: Then, in your remove function, check if all elements have been removed, and if they have, set the Here is a fork of the StackBlitz 这篇关于从选择框中删除选择的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！<select multiple (change)="changeEvent($event)" #mySelect>
<option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>
</select>
import { ViewChild } from '@angular/core';
// ...
@ViewChild('mySelect') select;
select的value设置为null if (array.length === 0) {
this.select.nativeElement.value = null;
}
first name and last name which will always showing..<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>
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);
}
property one and property two gets binded to the inputs and in select box the property one is highlighted as selected..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.<select multiple (change)="changeEvent($event)" #mySelect>
<option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>
</select>
import { ViewChild } from '@angular/core';
// ...
@ViewChild('mySelect') select;
value of the select to nullif (array.length === 0) {
this.select.nativeElement.value = null;
}
