在角度反应式表单中为表单数组的每个表单控件设置Id或名称,您可以按照以下步骤进行操作:
FormArray
来创建表单数组控件。例如:import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
formArray: this.fb.array([])
});
}
get formArray() {
return this.myForm.get('formArray') as FormArray;
}
}
*ngFor
指令循环遍历表单数组,并为每个表单控件设置唯一的Id或名称。例如:<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<div formArrayName="formArray">
<div *ngFor="let control of formArray.controls; let i = index" [formGroupName]="i">
<input type="text" [formControlName]="i" [id]="'input-' + i" [name]="'input-' + i">
</div>
</div>
<button type="submit">Submit</button>
</form>
在上述代码中,我们使用了formArrayName
来指定表单数组的名称,然后使用formGroupName
来指定每个表单控件的索引,以便正确绑定表单控件的值和验证规则。为了为每个表单控件设置唯一的Id和名称,我们使用了[id]
和[name]
属性,并通过拼接索引值实现唯一性。
请注意,这只是一个示例,您可以根据自己的需求进行修改和扩展。关于角度反应式表单和表单数组的更多详细信息,您可以参考腾讯云的Angular Reactive Forms相关文档。
领取专属 10元无门槛券
手把手带您无忧上云