如何使用angular8避免在formcontrolname中重复相同的值 [英] How to avoid same value repeating in the formcontrolname using angular8
问题描述
我使用formArray来循环值,在选择一个项目时,我们可以根据我们选择的一侧向右和向左移动.这里,我从右边选择最后一个项目并向左移动,然后我选择最后一个但是一个并将其向左移动.然后重复值来了.我认为这是由于索引值不匹配.我无法纠正这个问题.谁能帮我解决这个问题.
演示:工作演示
HTML:
<div class="swap-list-item";*ngFor=让 agentNotinView 的项目;让 i = 索引"[formGroupName]=i"[class.selected]=selected2.includes(items)"><input formControlName="agentNotInViewValue";[只读]=真"(点击)=onSelect(2,项目)";[禁用] =isReadOnly"/>
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})从一个按钮移动到另一个按钮:moveFrom(fromListNumber: number) {const 选择:MyInterface[] = this.getSelected(fromListNumber);if (selected.length === 0) {返回;}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);//删除项目和表单组selected.forEach((item) => {const index: number = fromModel.indexOf(item);const formGroup: FormGroup = fromFormArray.controls[index] as FormGroup;//从模型中移除fromModel.splice(index, 1);//从数组中移除fromFormArray.removeAt(index);//添加到表单数组toFormArray.push(formGroup);//将项目添加到模型toModel.push(item);});//清除选中选择.长度= 0;this.groupInfoForm();this.notGroupInfoForm();}
根据我的调试,items.value 和 items.id 没问题,但是 formcontrolName 给出了重复的值.需要帮助来纠正这个问题.
我能够通过在再次调用表单时添加 if ans else 条件来解决此问题,原来如此.
TS:
moveFrom(fromListNumber: number) {const 选择:MyInterface[] = this.getSelected(fromListNumber);if (selected.length === 0) {返回;}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);//删除项目和表单组selected.forEach((item) => {const index: number = fromModel.indexOf(item);const formGroup: FormGroup = fromFormArray.controls[index] as FormGroup;//从模型中移除fromModel.splice(index, 1);//从数组中移除fromFormArray.removeAt(index);//添加到表单数组toFormArray.push(formGroup);//将项目添加到模型toModel.push(item);});//清除选中选择.长度= 0;if(fromListNumber == 2) {this.groupInfoForm();} else if(fromListNumber == 1) {this.notGroupInfoForm();}}
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.
DEMO: Working Demo
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();
}
As per my debug, items.value and items.id comes fine, but formcontrolName gives the duplicate value. help needed to rectify this.
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屋!