具有动态字段的 Angular 反应式表单答案

【问题标题】：Angular Reactive Form with dynamic fields具有动态字段的 Angular 反应式表单
【发布时间】：2020-05-13 02:09:24
【问题描述】：

我目前正在与 Angular 表单数组作斗争。

我有一个动态添加字段的表单。

我已经创建了表单对象：

this.otherDataForm = this.fb.group({
});

我像这样添加动态字段：

addField(field: CustomFormField): void {
    this.otherDataForm.addControl(id_campo, new FormControl('', Validators.required));
}

我遍历这些字段：

<form *ngIf="selectedProfile" [formGroup]="otherDataForm">
      <div class="mb-3" *ngFor="let field of fields; let i = index">
           <label>{{field.descripcion}}</label>
           <input class="form-control" [formControlName]="field.id_campo" type="number">
      </div>
</form>

但如果需要该字段，我似乎无法控制每个字段的错误以显示验证消息。

有人可以帮我解决这个问题吗？也许有更好的方法来做到这一点。

【问题讨论】：

[formControlName]="field.id_campo" 动态如何？
id_campo 是什么，设置在哪里，请创建一个堆栈闪电战以便更好地帮助您
认为一个formGroup只是一组FormControls。要访问 formGroup 的 formControl，您可以使用 nameOfForm.get('nameOfField')，因此您可以使用 otherDataForm.get(field.id_campo) 来获取 formControl，因此 otherDataForm.get(field.id_campo).valid 给您是否有效，otherDataForm.get(field.id_campo).errors 给您错误.. . 即使你可以在你的输入中使用<input class="form-control" [formControl]="otherDataForm.get(field.id_campo)" type="number">
@Eliseo 我试过了，但这不起作用，似乎 ngfor 与表单分开工作。
@NicholasK 好吧，至少将属性“field.id_campo”附加为每个字段的名称。

标签： javascript angular forms formarray formgroups

【解决方案1】：

嗯，直接使用formControl和formGroup的构造函数感觉更舒服

fields=[{id:'one',label : 'one',value:1},{id:'two',label : 'two',value:2}]
form=new FormGroup({})
ngOnInit()
{
   this.fields.forEach(x=>{
    this.form.addControl(x.id,new FormControl(x.value,Validators.Required))
   })
}

<form [formGroup]="form">
    <div *ngFor="let field of fields">
        <input [formControlName]="field.id">
        <div class="error" *ngIf="form.get(field.id).touched &&
            form.get(field.id).invalid">Required</div>
    </div>
</form>
{{form?.value|json}}

但是可以在输入中直接使用[formControl]

<form [formGroup]="form">
    <div *ngFor="let field of fields">
    <label>{{field.label}}</label>
        <input [formControl]="form.get(field.id)">
        <div class="error" *ngIf="form.get(field.id).touched && 
             form.get(field.id).invalid">Required</div>
    </div>
</form>

甚至，你可以遍历form.controls|keyvalue

<form [formGroup]="form">
    <div *ngFor="let control of form.controls |keyvalue;let i=index">
    <label>{{fields[i].label}}</label>
    <input [formControl]="control.value">
        <div class="error" *ngIf="control.value.touched && 
               control.value.invalid">Required</div>
    </div>
</form>

见stackblitz

【讨论】：

非常感谢，Eliseo。在从每个字段中获取错误时，您已经启发了我的错误。