如何验证动态添加的表单字段的重复项

Question

我有一个来自调用的验证表单和一个名为RepDetails的表单数组，其中包含三个字段。默认情况下，表单显示三个字段。用户可以通过单击"添加更多"来添加更多详细信息。现在我想检查Mydetails[0]。name应该与Mydetails[1].name不匹配。有人能在这个上提供帮助吗

Myform = this.fb.group({   
Mydetails: this.fb.array([this.createMydetails()])   
});
createMydetails(): FormGroup {
return this.fb.group({
Myname: ['', Validators.required ],
Myid: ['', Validators.required],
Myphone: ['', Validators.required]
});
}

Html

<div
formArrayName="Mydetails"
*ngFor="let item of Mydetails.controls; let i = index"
>
<div [formGroupName]="i">
<mat-form-field appearance="outline">
<mat-label class="required">
Name
</mat-label>
<input
appAlphaNumeric
[maxlength]="maxRepNamelen"
formControlName="Myname"
class="mat-body-1"
matInput
/>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label class="required">
Id
</mat-label>
<input
appAlphaNumeric

formControlName="Myid"
class="mat-body-1"
matInput
/>
</mat-form-field>
<div class="phn-wrapper">
<ngx-intl-tel-input
[cssClass]="'int-phn'"
[searchCountryField]="[
SearchCountryField.Iso2,
SearchCountryField.Name
]"name="phone"
formControlName="Myphone"
>
</ngx-intl-tel-input>
</div>
<mat-icon
*ngIf="Mydetails.length > 1"
(click)="remove(i)"
class="close"
>close</mat-icon
>

</div>
</div>
class="add-fields"
(click)="add()"
>
<mat-icon class="icon">add_circle_outline</mat-icon>
<span class="text mat-button">
{{"ADD MORE"}}</span
>
</div>

Answer 1

在这个SO中，您可以通过FormArray进行自定义验证。如果你在formArray上使用自定义验证，问题是你总是检查formArray中的任何值(repName、passport或phoneName中的任何更改(

您可以在考虑其他控件的表单控件上创建自定义验证器

checkIfUnique(index) {
return (control: FormControl) => {
//try get the form array
//control.parent is the FormGroup, control.parent.parent is the formArray
const formArray =
control.parent && control.parent.parent
? (control.parent.parent as FormArray)
: null;
if (formArray && formArray.controls.length) {
for (let i = index - 1; i >= 0; i--) {
if (
(formArray.at(i) as FormGroup).get("repName").value == control.value
)
return { errorRepeat: true };
}
}
};
}

当生成formArray的formGroup时，您需要将"；索引"；元素的。所以您需要更改您的函数createRep

//pass the index
createRep(index:number): FormGroup {
return this.fb.group({
repName: ['', [Validators.required,this.checkIfUnique(index) ]],
passport: ['', Validators.required],
phoneNumber: ['', Validators.required]
});
}

好吧，我们最后需要的是，当更改任何"repName"的值时，检查其余控件。请记住，Angular检查您更改的formControl，但不检查其余的，所以如果repName[0]="a"和repName[1]="b"，当将repName[0]更改为"；b"；角度不检查repName[1]。所以我们创建了一个函数

checkFormArray()
{
this.detailsFormArray.controls.forEach(x=>{
(x as FormGroup).get('repName').updateValueAndValidity()
})
}
//I use a getter of the formArray
get detailsFormArray() {
return (this.verificationForm.get("repDetails") as FormArray)
}

在输入中，我们调用函数

<input formControlName="repName" (input)="checkFormArray()">

你可以看到堆叠的

注意：我从你的问题中删除了标签angularjs(你的问题只是关于angular(