Angular 模板驱动表单：输入 "component" 未绑定到表单

Question

我正在尝试根据某些 JSON 对象（配置）动态生成表单字段。该配置对象包含构建表单字段所需的所有属性值（例如：label、type、placeholder 等）。

设置

在我的父组件中：我有一个表单，在该表单下有一个 ngFor，遍历配置对象，试图生成字段。

<form #dynamicForm="ngForm">
  <div *ngFor="let field of formFields">    <!-- formFields is the config object -->
    <app-form-field [props]="field" [formData]="formData"></app-form-field>
  </div>
  <button [disabled]="!dynamicForm.form.valid">Submit</button>
</form>

为了避免阻塞父组件，我创建了一个通用的 <form-field> 组件，它采用所有字段属性（如 props）和一个引用对象（以绑定字段的值）。

<div *ngIf="props.type === 'text'">         <!-- One div for each input type -->
  <label [for]="props.id">{{ props.label }}</label>
  <input
    #field="ngModel"
    [id]="props.id"
    [type]="props.type"
    [attr.name]="props.name"
    [placeholder]="props.placeholder"
    [(ngModel)]="formModel[props['apiDataKey']]"
    [required]="props.isRequired"
    [disabled]="props.isDisabled"
  >
</div>

<!-- Other input types here -->

问题

表单标签包含本地引用 #dynamicForm="ngForm" -> 似乎永远不会更新。

虽然各个字段验证工作得很好，但主要形式 (dynamicForm.value) 似乎：

不包含任何数据
因此，表格总是显示为有效（dynamicForm.form.valid 总是 true）

我在这里创建了一个关于 stackblitz 的演示：https://stackblitz.com/edit/angular-ivy-nvm4hd?file=src/app/app.component.html

PS：我是 angular2+ 的新手，似乎无法弄清楚我错过了什么。

提前致谢

Answer 1

在子组件 viewProviders 数组中，我们可以提供 ControlContainer 以使用现有的 NgForm 实例：

@Component({
 ...,
 viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class FormFieldComponent implements OnInit {
 ...
}

Angular 模板驱动表单：输入 "component" 未绑定到表单

Angular template driven form: input "component" not binding to form

angular

angular-forms

设置

问题