如何在angular中验证动态表单

Question

下面是我的代码。根据循环计数，fName将增加。目前我正在使用ng-bootstrap-form-validation进行验证。问题是，如果我使用formControlName验证不工作，它会复制，如果一个字段(fName)是正确的，所有字段都是正确的。

下面是我的HTML代码，

<form [formGroup]="formGroup" (validSubmit)="onSubmit()">
<div class="results-traveler" *ngFor="let item of createLoopRange(selectedDataDetails[0].Adult); let ii= index;">
<div class="row">
<div class="col-12 heading" *ngIf="ii == 0 else travelCount">Traveller {{ii}}</div>
<div class="col-6 M-full-div">
<label>First Name</label>
<div class="inputContainer form-group">
<input class="InputField form-control" type="text" placeholder="Type Here" formControlName="fName" id="fName_{{i}}" />
</div>
</div>
</div>
</div>
<a class="SearchBtn" type="submit">CONTINUE</a>
</form>

下面是我使用的typescript代码，

ngOnInit(): void {
this.bookingDetailsValidate();
}
bookingDetailsValidate() {
this.formGroup = new FormGroup({
fName: new FormControl('', [
Validators.required,
Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/)
])
});
}
onSubmit() {
console.log(this.formGroup);
}

谁能告诉我怎么做这件事?谢谢。

Answer 1

对于fName，使用FormArray，然后将FormControl添加到FormArray，您可以验证FormArray和FormArray中的每个FormControl

的例子:

this.formGroup = new FormGroup({
fName: new FormArray([], [
Validators.required    
])
});
...
const arrayOfNameControl = this.formGroup.get('fName') as FormArray
arrayOfNameControl.insert(0, new FormControl('',[
Validators.required,
Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/)
]));

Answer 2

这里需要表单数组。请参考链接

Angular form数组