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

问题描述 投票:0回答:1

我有一个按钮,单击该按钮时,应该呈现一个文本区域。我正在使用角度材质。尝试在 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; 
}
angular button input angular-material angular-ng-if
1个回答
0
投票

尝试从 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>  
© www.soinside.com 2019 - 2024. All rights reserved.