在ReactiveForms中实现多嵌套(by *ngFor) formControl进行验证的过程如下:
FormGroup
和FormArray
来表示嵌套的表单控件结构。FormGroup
用于表示一个组的控件集合,FormArray
用于表示数组形式的控件集合。*ngFor
指令来迭代嵌套的控件,为每个迭代项创建一个表单控件。使用formGroupName
来指定每个嵌套的FormGroup
的名称。Validators
提供的内置验证器,也可以自定义验证器。将验证规则应用到对应的表单控件上。valueChanges
事件或使用submit
按钮,来处理表单的提交操作。你可以获取表单的值,并进行相应的处理。以下是一个示例代码,演示了如何在ReactiveForms中实现多嵌套 formControl 进行验证:
<form [formGroup]="myForm" (ngSubmit)="submitForm()">
<div formArrayName="nestedArray">
<div *ngFor="let group of nestedArray.controls; let i=index" [formGroupName]="i">
<input formControlName="controlName" placeholder="Control Name">
<div *ngIf="myForm.get('nestedArray').get(i.toString()).get('controlName').invalid && myForm.get('nestedArray').get(i.toString()).get('controlName').touched">
<div *ngIf="myForm.get('nestedArray').get(i.toString()).get('controlName').errors.required">
Control Name is required.
</div>
</div>
</div>
</div>
<button type="submit">Submit</button>
</form>
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor() { }
ngOnInit() {
this.myForm = new FormGroup({
nestedArray: new FormArray([
new FormGroup({
controlName: new FormControl('', Validators.required)
}),
new FormGroup({
controlName: new FormControl('', Validators.required)
})
])
});
}
submitForm() {
if (this.myForm.valid) {
console.log(this.myForm.value);
// 处理表单提交逻辑
}
}
}
在这个示例中,我们使用FormArray
来表示嵌套的表单控件。myForm
是一个FormGroup
,其中包含一个名为nestedArray
的FormArray
,这个FormArray
中包含两个嵌套的FormGroup
。每个嵌套的FormGroup
都包含一个名为controlName
的FormControl
,并应用了一个必填的验证规则。
模板中使用了*ngFor
来迭代nestedArray.controls
,并使用formGroupName
来指定每个嵌套的FormGroup
的名称。对于每个FormControl
,我们添加了一个输入框,并根据其验证状态显示相应的错误信息。
在组件中,我们通过submitForm
方法来处理表单的提交操作。如果表单验证通过,我们可以获取表单的值并进行相应的处理。
对于腾讯云相关产品和产品介绍,可以参考腾讯云的官方文档或官方网站。
领取专属 10元无门槛券
手把手带您无忧上云