自定义组件中的 Angular 表单控件答案

【问题标题】：Angular Form Controls in Custom Component自定义组件中的 Angular 表单控件
【发布时间】：2017-07-02 02:48:18
【问题描述】：

我正在使用 Angular 2 创建一个复杂的模板驱动表单，该表单从 API 获取组和字段的结构。 API 发送一个 JSON 对象，其中包含可以包含字段和/或子组的组。由于组可以有子组，我认为处理这个问题的最简单方法是有一个自定义控件，FieldGroupComponent，它接受一个输入参数“组”，如果组包含子组，它将递归地呈现它们，使用 FieldGroupComponent。

我遇到的问题是 ngForm 无法将 FieldGroupComponent 中的输入控件识别为 FormControls。 ngForm 认为它没有任何控件，并且不会识别这些字段是无效的。

表单页面如下所示：

<form ngForm (ngSubmit)="submitForm()">
  <field-group *ngFor="let group of FormGroups" [group]="group"></field-group>
</form>

还有 FieldGroupComponent：

@Component({
  selector: "field-group",
  templateUrl: "./field-group.component.html"
})
export class FieldGroupComponent {
  @Input("group") group;
}

还有 FieldGroupComponent 模板：

<fieldset>
  <h1>{{group.Title}}</h1>
  <div *ngFor="let field of group.Fields">
    ... render field ...
  </div>
  <div *ngFor="let subGroup of group.FieldGroups">
    <field-group [group]="subGroup"></field-group>
  </div>
</fieldset>

【问题讨论】：

你检查过这个angular.io/docs/ts/latest/cookbook/dynamic-form.html
如果要在表单中使用自定义组件，组件要实现ControlValueAccessor。

标签： angular angular2-forms

【解决方案1】：

我最终只是将 NgForm 作为 @Input 传递给 FieldGroupComponent，然后手动将字段控件添加到表单中：

@Input("form") form: NgForm;
@ViewChildren(NgModel) private formControls: QueryList<NgModel>;

ngAfterViewInit(): void {
  this.formControls.forEach((item: NgModel) => this.form.addControl(item));
}

【讨论】：

这行得通吗？您是如何实现验证的，即表单如何知道是否填写了所需的输入？

【解决方案2】：

我的表单是动态的，所以我扩展了 SZH 的解决方案 ngAfterViewInit，因此 formControls 在每次更改时都会重建。 M

在某些情况下可能会导致一些性能损失，但如果您需要它，它会保持表单控件的更新：

public ngAfterViewInit(): void {
    this._formControls.changes.subscribe(() => {
        this._formControls.forEach((item: NgModel) => {
            if (!this.form.controls[item.name]) {
                this.form.addControl(item);
            }
        });
    });
}

【讨论】：