Javascript 具有动力场的角反应形式

我目前正在与角形阵列作战

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

我已创建表单对象：

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>

{{field.description}}

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

有人能帮我做这个吗？

---

也许有更好的方法可以做到这一点。

好吧，我觉得直接使用

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}}

---

请参阅如何

[formControlName]=“field.id\u campo”

动态？什么是

id\u campo

及其设置位置，请创建一个stackblitz以帮助您更好地认为formGroup只是一组FormControls。要访问formGroup的formControl，您可以使用nameOfForm.get（'nameOfField'），这样您就可以使用

otherDataForm.get（field.id\u campo）

来获取formControl，所以

otherDataForm.get（field.id\u campo）。valid

如果有效，则提供给您，

otherDataForm.get（field.id\u campo）。错误

提供错误。。。即使您可以在输入中使用

@Eliseo我已经尝试过了，但这不起作用，它似乎是ngfor在表单中的一部分。@NicholasK好吧，至少这会为每个字段添加属性“field.id\u campo”。非常感谢您，Eliseo。在从每个字段获取错误时，您已经用我的错误启发了我。

<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 [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>