如何避免使用angular8在formcontrolname中重复相同的值 [英] How to avoid same value repeating in the formcontrolname using angular8
问题描述
我使用formArray来循环值并选择一个项目,我们可以根据选择的一侧左右移动.在这里,我从右边选择最后一个项目并向左移动,然后我选择最后一个但是一个,然后将其移到左边.然后重复的值来了.我认为这是由于索引值不匹配造成的.我无法纠正此问题. 谁能帮我解决这个问题.
i have used formArray to loop the values and on selection of one item, we can move right and left based on which side we have selected.Here, i am selecting last item from right and moving to left, then i select last but one and move that to left. Then the duplicate value has come. I think it is due to index value mismatch. I am not able to rectify this issue. can anyone help me out to solve this.
演示: 工作演示
HTML:
<div class="card-body overflow-auto py-0" formArrayName="agentNotGroupView">
<div class="swap-list-item" *ngFor="let items of agentNotinView; let i = index" [formGroupName]="i"
[class.selected]="selected2.includes(items)">
<input formControlName="agentNotInViewValue" [readOnly]="true" (click)="onSelect(2, items)" [disabled] = "isReadOnly"/>
</div>
</div>
TS:
this.agentNotInViewArray = this.FB.array(
this.agentNotinView.map(x => this.FB.group({
agentNotInViewValue: this.FB.control(x.value)
}))
);
this.agentGroupNotViewInfoForm = this.FB.group({
agentNotGroupView: this.agentNotInViewArray
})
move from one button to other:
moveFrom(fromListNumber: number) {
const selected: MyInterface[] = this.getSelected(fromListNumber);
if (selected.length === 0) {
return;
}
const toListNumber: number = fromListNumber === 1 ? 2 : 1;
const fromModel: MyInterface[] = this.getModel(fromListNumber);
const fromFormArray: FormArray = this.getFormArray(fromListNumber);
const toModel: MyInterface[] = this.getModel(toListNumber);
const toFormArray: FormArray = this.getFormArray(toListNumber);
// remove items and form groups
selected.forEach((item) => {
const index: number = fromModel.indexOf(item);
const formGroup: FormGroup = fromFormArray.controls[index] as FormGroup;
// remove from model
fromModel.splice(index, 1);
// remove from from array
fromFormArray.removeAt(index);
// add to form array
toFormArray.push(formGroup);
// add item to model
toModel.push(item);
});
// clear selected
selected.length = 0;
this.groupInfoForm();
this.notGroupInfoForm();
}
根据我的调试,item.value和items.id很好,但是formcontrolName给出了重复的值. 纠正此问题所需的帮助.
As per my debug, items.value and items.id comes fine, but formcontrolName gives the duplicate value. help needed to rectify this.
推荐答案
我能够通过在再次调用表单时添加if ans else条件来解决此问题, 就是这样.
I was able to solve this by adding an if ans else condition while calling the form again, so it was.
TS:
moveFrom(fromListNumber: number) {
const selected: MyInterface[] = this.getSelected(fromListNumber);
if (selected.length === 0) {
return;
}
const toListNumber: number = fromListNumber === 1 ? 2 : 1;
const fromModel: MyInterface[] = this.getModel(fromListNumber);
const fromFormArray: FormArray = this.getFormArray(fromListNumber);
const toModel: MyInterface[] = this.getModel(toListNumber);
const toFormArray: FormArray = this.getFormArray(toListNumber);
// remove items and form groups
selected.forEach((item) => {
const index: number = fromModel.indexOf(item);
const formGroup: FormGroup = fromFormArray.controls[index] as FormGroup;
// remove from model
fromModel.splice(index, 1);
// remove from from array
fromFormArray.removeAt(index);
// add to form array
toFormArray.push(formGroup);
// add item to model
toModel.push(item);
});
// clear selected
selected.length = 0;
if(fromListNumber == 2) {
this.groupInfoForm();
} else if(fromListNumber == 1) {
this.notGroupInfoForm();
}
}
这篇关于如何避免使用angular8在formcontrolname中重复相同的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!