带有 ContentChildren 的动态表单

Question

我正在尝试使用 ContentChildren 创建一个动态表单，已完成，但我有 2 个问题

没有Material: 提交时抓不到输入值，不知道怎么办
使用 Material：我无法捕获对输入的引用，添加“mat-form-field”使事情变得复杂。

我在 stackblitz 中留下了 example。谢谢！

Answer 1

为了捕获和观察输入值，我建议您将 ngModel 指令添加到动态表单中的所有 input 控件。这将自动为每个 input 创建一个 FormControl 实例，您可以将其添加到动态 FormGroup:

Note: you can also get input value by accessing inputElement.value but you have to listen for input event in order to watch for the changes

html

<filter-form (onSubmit)="onSubmit($event)">
    <input type="text" placeholder="0.00" propertyName="1" ngModel/>
    <input type="text" placeholder="0.00" propertyName="2" ngModel/>
    <input type="text" placeholder="0.00" propertyName="3" ngModel/>
    <mat-form-field>
        <input matInput type="text" placeholder="0.00" propertyName="4" ngModel/>
    </mat-form-field>
</filter-form>

您可以通过将 NgModel 实例注入您的自定义指令来获取该实例：

@Directive({
  selector: "input"
})
export class FocusDirective {

  @Input() propertyName: string;

  constructor(public ngModel: NgModel) {}
}

现在，您可以将 FormControl 实例添加到您的 formGroup 中：

ngAfterContentInit(): void {
  console.log("ngAfterContentInit::input is: ", this.items);
  this.items.toArray().forEach(x => {
    this.formGroup.addControl(
      x.propertyName,
      x.ngModel.control <--------------------------- this one
    );
  });
}

为了获得所有 ContentChildren 而不管嵌套级别，您必须使用 descendants 选项：

@ContentChildren(FocusDirective, { descendants: true }) items: QueryList<FocusDirective>;

Forked Stackblitz

带有 ContentChildren 的动态表单

Dynamic form with ContentChildren

angular-material

angular2-forms

angular