单击按钮渲染文本区域时出现错误

Question

我有一个按钮，单击该按钮时，应该呈现一个文本区域。我正在使用角度材质。尝试在 textarea 标记中使用 ngIf 但出现错误 -

错误：mat-form-field 必须包含 MatFormFieldControl。 我已经添加了库，所以我认为是 ngIf 导致了问题。在 ngcontainer 标签内包装 textarea 标签并在其中使用 ngIf 也会给出此错误。 HTML

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

Ts

toggleTextBox() {
    this.showTextBox = !this.showTextBox; 
}

Answer 1

尝试从 mat-form-field 制作两个版本，第一个版本带有 textarea，第二个版本没有它，以避免更改样式并消除错误。

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