自定义组件中的角形控件

Question

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

Answer 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));
}

Answer 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);
            }
        });
    });
}