在Angular 6中,可以通过动态添加字段的方式来实现表单验证。下面是一个示例代码,演示了如何动态添加字段并进行表单验证:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-dynamic-form-validation',
templateUrl: './dynamic-form-validation.component.html',
styleUrls: ['./dynamic-form-validation.component.css']
})
export class DynamicFormValidationComponent implements OnInit {
formGroup: FormGroup;
fields: any[] = [];
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.formGroup = this.formBuilder.group({});
}
}
ngOnInit() {
this.formGroup = this.formBuilder.group({});
this.fields.forEach(field => {
const validators = [];
if (field.required) {
validators.push(Validators.required);
}
if (field.minLength) {
validators.push(Validators.minLength(field.minLength));
}
this.formGroup.addControl(field.name, this.formBuilder.control('', validators));
});
}
注意:上述代码中的 fields 数组是一个示例,您可以根据实际需求定义自己的字段数组。
通过以上步骤,您可以在Angular 6中实现动态添加字段的表单验证。