在Angular 8中,可以使用formBuilder
验证ngFor
中的输入字段。以下是一个解决方案的示例代码:
首先,创建一个Reactive Form并导入所需的模块和服务:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.form = this.formBuilder.group({
items: this.formBuilder.array([])
});
}
}
然后在模板中,使用ngFor
循环创建输入字段:
最后,在组件类中添加方法来动态添加和删除输入字段:
addItem() {
const item = this.formBuilder.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});
this.form.controls.items.push(item);
}
removeItem(index: number) {
this.form.controls.items.removeAt(index);
}
现在,你可以在ngFor
中动态验证输入字段。