在Angular 8中,要在FormArray中应用验证,可以按照以下步骤进行操作:
formGroup
指令来创建一个表单组,并将其与组件中的表单控件关联起来。例如:<form [formGroup]="myForm">
<div formArrayName="myArray">
<div *ngFor="let control of myForm.get('myArray').controls; let i = index">
<input type="text" [formControlName]="i">
</div>
</div>
</form>
FormGroup
实例,并在其中定义一个FormArray
控件。然后,可以使用Validators
类中的验证器来定义验证规则。例如:import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray } 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(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myArray: this.formBuilder.array([
this.formBuilder.control('', Validators.required),
this.formBuilder.control('', Validators.minLength(5))
])
});
}
}
在上面的示例中,我们创建了一个myArray
的FormArray
,其中包含两个控件,一个要求必填,另一个要求最小长度为5。
<button (click)="submitForm()">Submit</button>
submitForm
方法,该方法将会触发表单的验证,并根据验证结果执行相应的操作。例如:submitForm() {
if (this.myForm.valid) {
// 表单验证通过,执行相应的操作
} else {
// 表单验证不通过,执行相应的操作
}
}
在上面的示例中,我们使用valid
属性来检查表单是否通过验证。
总结: 在Angular 8中,要在FormArray中应用验证,首先需要在HTML模板中创建一个表单组,并将其与组件中的表单控件关联起来。然后,在组件的Typescript文件中,创建一个FormGroup实例,并在其中定义一个FormArray控件,并使用Validators类中的验证器来定义验证规则。最后,在模板中添加一个按钮,用于提交表单并触发验证,并在组件的Typescript文件中实现相应的方法来处理验证结果。
领取专属 10元无门槛券
手把手带您无忧上云