按钮单击以呈现文本区域给出错误-解网

问：

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

错误：mat-form-field 必须包含 MatFormFieldControl。我已经添加了库，所以我认为是ngIf导致了问题。将 textarea 标签包装在 ngcontainer 标签中并在其中使用 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-material angular-ng-if

<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>

1赞 Hezy Ziv 9/24/2023 #2

一种解决方案是在本身上使用 *ngIf，而不是在：<mat-form-field><textarea>

<button mat-raised-button color="primary" (click)="toggleTextBox()">Add</button>

<form [formGroup]="limitationForm">
  <ng-container *ngIf="showTextBox">
    <mat-form-field>
      <mat-label>Textarea</mat-label>
      <textarea matInput formControlName="limitTextarea" type="text" id="limitTextarea" name="limitTextarea"></textarea>
    </mat-form-field>
  </ng-container>
</form>

上一个：防止用户输入负号，并且仅在 angular 输入字段上输入 0

下一个：Fonction 跳过布尔值，不计算 [duplicate]

按钮单击以呈现文本区域给出错误

Button click to render textarea giving error

评论