如何将材质输入与嵌套的 FormControl 绑定？答案

【问题标题】：How to bind material input with nested FormControl?如何将材质输入与嵌套的 FormControl 绑定？
【发布时间】：2020-10-02 04:53:57
【问题描述】：

我有一个响应式表单，我想将材质输入与 FormControl 绑定。当我使用如下的原始 html 输入时，一切正常：

<input type="text" formControlName="forContractor" />

但是如果我使用下面的 mat-form-field，我会得到：“forContractor”突出显示错误消息“未定义标识符‘forContractor’。组件声明、模板变量声明和元素引用不包含这样的会员”

<mat-form-field appearance="outline">
  <mat-label>Contractor name</mat-label>
  <input matInput placeholder="Contractor name" [formControl]="forContractor" />
</mat-form-field>

组件类：

addInvoiceForm = this.formBuilder.group({
    forContractor: [""],
});

我发现，如果我为此控件创建一个属性，然后将其分配给 FormControl，然后将此属性与模板绑定，问题就会消失。但是，这看起来很奇怪，尤其是我有 10 个控件用于此表单。有没有一种方法可以在不为每个控件创建属性的情况下做到这一点？

奇怪的解决方案：

forContractorControl = new FormControl("");

addInvoiceForm = this.formBuilder.group({
    forContractor: this.forContractorControl,
});

<mat-form-field appearance="outline">
  <mat-label>Contractor name</mat-label>
  <input matInput placeholder="Contractor name" [formControl]="forContractorControl" />
</mat-form-field>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您需要将mat-form-field 放在<form></form> 标记中，然后像这样指定组：

<form [formGroup]="addInvoiceForm" (ngSubmit)="onSubmit()">
 <mat-form-field appearance="outline">
   <mat-label>Contractor name</mat-label>
   <input matInput placeholder="Contractor name" formControlName="forContractorControl" />
 </mat-form-field>
</form>

我用 angular material 做了很多表格，最后建立了自己的库，你可以在这里查看 ngx-mat-dynamic-form-builder 和 live example

【讨论】：