在Angular中,可以使用模板驱动表单来验证表单元素。如果要从ngFor循环中获取验证元素,可以使用FormControlName指令和FormGroup指令来实现。
下面是一个示例代码:
在组件中定义表单控件:
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
template: `
`,
})
export class MyComponent {
myForm: FormGroup;
items: any[];
constructor() {
this.myForm = new FormGroup({});
this.items = [1, 2, 3, 4, 5];
// 动态创建表单控件
this.items.forEach((item, index) => {
this.myForm.addControl('item' + index, new FormControl('', Validators.required));
});
}
}
在模板中使用FormControlName指令来绑定表单控件,并通过ngFor循环动态生成表单控件。在组件中,通过FormGroup指令来绑定整个表单。
在上面的示例中,我们使用了items数组来生成5个文本输入框,并为每个输入框创建了一个FormControl。通过Validators.required验证器,我们确保每个输入框都是必填的。
这样,我们就可以通过this.myForm.get('item0')、this.myForm.get('item1')等方式来获取每个表单控件,并进行相应的验证操作。
上一篇:Angular默认值选项