点击按钮渲染textarea报错：mat-form-field需包含MatFormFieldControl

问题原因 #

你碰到的Error: mat-form-field must contain a MatFormFieldControl错误，核心原因是当*ngIf="showTextBox"为false时，<mat-form-field>内部没有任何符合要求的表单控件（带matInput的元素）。Angular Material强制要求mat-form-field必须始终包含一个MatFormFieldControl类型的子元素，空的mat-form-field会直接触发这个报错。

另外注意：你的按钮用了(ngSubmit)事件，这是错误的——ngSubmit是绑定在<form>标签上的事件，按钮应该用(click)来触发toggleTextBox()方法。

解决方案 #

方案1：将ngIf移到整个mat-form-field上

直接控制整个表单域的显示/隐藏，隐藏时mat-form-field本身不存在，自然不会触发空控件检查：

<button mat-raised-button color="primary" (click)="toggleTextBox()">Add</button>  
<form [formGroup]="limitationForm">  
  <mat-form-field *ngIf="showTextBox"> 
    <mat-label>Textarea</mat-label>            
    <textarea matInput formControlName="limitTextarea"  
              type="text" id="limitTextarea" name="limitTextarea"></textarea>                   
  </mat-form-field>   
</form>

方案2：用hidden指令代替ngIf

如果需要保留mat-form-field的布局空间（隐藏时不塌陷），可以用[hidden]代替*ngIf。hidden只是视觉上隐藏元素，DOM中仍保留控件，mat-form-field能正常识别到子控件：

<button mat-raised-button color="primary" (click)="toggleTextBox()">Add</button>  
<form [formGroup]="limitationForm">  
  <mat-form-field> 
    <mat-label>Textarea</mat-label>            
    <textarea matInput [hidden]="!showTextBox" formControlName="limitTextarea"  
              type="text" id="limitTextarea" name="limitTextarea"></textarea>                   
  </mat-form-field>   
</form>

代码修正说明 #

两种方案都修正了按钮的事件绑定，把(ngSubmit)改成了(click)，这是正确触发方法调用的方式。

内容的提问来源于stack exchange，提问作者user17449555