Angular 带ContentChildren的动态表单

我正在尝试用ContentChildren创建一个动态表单，已经完成了，但是我有两个问题

没有材料：我无法在提交时捕获输入值，我不知道怎么做

对于Material：我无法捕获对输入的引用，添加“mat form field”使事情变得复杂

---

我留下了一个闪电战。谢谢

为了捕获和监视输入值，我建议您将

ngModel

指令添加到动态表单中的所有

input

控件中。这将自动为每个

输入创建
FormControl
的实例，您可以将其添加到动态
FormGroup
：

注意：您也可以通过访问
inputElement.value
获取输入值，但是
您必须监听
输入
事件才能观察更改

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>  

现在，您可以将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
    );
  });
}


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(FocusDirective, { descendants: true }) items: QueryList<FocusDirective>;