我想在单击按钮时隐藏和显示输入字段答案

【问题标题】：I want to hide and show input fields when click on a button我想在单击按钮时隐藏和显示输入字段
【发布时间】：2020-05-10 12:27:49
【问题描述】：

页面.html

             <form [formGroup]="myForm">
        <ion-button [(ngModel)]="isActive"(click)="onClick()" >Add</ion-button>



           <ion-item>
              <ion-label position="floating">First Name</ion-label>
        <ion-input type="text" [(ngModel)]="firstname" formControlName="firstname" ></ion-input>
         </ion-item>

        <ion-item class="item_country" >
          <ion-label position="floating">Date Of Birth</ion-label>
       <ion-datetime formControlName="date"  [(ngModel)]="date" displayFormat="DD/MMM/YYYY"> 
        </ion-datetime>
         </ion-item>

         <ion-item>
          <ion-label position="floating">Passport number</ion-label>
                <ion-input type="text" formControlName="passport"  [(ngModel)]="passport" > 
        </ion-input>
          </ion-item>

          <div *ngIf="isActive">


           <ion-item>

        <ion-label position="floating">First Name</ion-label>
             <ion-input type="text" [(ngModel)]="firstname1" formControlName="firstname1" > 
      </ion-input>

        </ion-item>



          <ion-item class="item_country" >
         <ion-label position="floating">Date Of Birth</ion-label>
        <ion-datetime formControlName="date1"  [(ngModel)]="date1"displayFormat="DD/MMM/YYYY"> 
        </ion-datetime>
         </ion-item>

            <ion-item>
             <ion-label position="floating">Passport number</ion-label>
               <ion-input type="text" formControlName="passport1"  [(ngModel)]="passport1" > 
               </ion-input>
              </ion-item>

            </div>

page.ts

                onClick(){
                this.isActive = !this.isActive;
               }

它会给出如下formcontrol错误：

我不明白哪里出错了，请帮助我。我想在单击按钮时显示输入字段，并在单击按钮时隐藏。但给出错误请为此提供帮助。谢谢你的帮助

【问题讨论】：

能否提供工作演示？
为什么同时使用 [(ngModel)] 和 formControlName？无效。

标签： html css angular ionic-framework ionic4

【解决方案1】：

你不能同时使用 formControl 和 ngModel，只能使用其中之一。

【讨论】：

但是为了将数据存储在数据库中，我们使用 formControlName，我使用另一种形式，它也可以工作
angular.io/api/forms/FormControlName#use-with-ngmodel

【解决方案2】：

通读您发布的错误屏幕截图。它有解释。如果你想同时使用 formControlName 和 ngModel 使用[ngModeloptions]="{standalone:true}"

【讨论】：

但在我的其他表单中，我同时使用了相同的 formConrolName 和 ngModel，它会很好地工作
看看这里 - (stackoverflow.com/questions/39126638/…)

【解决方案3】：

从输入标签中移除 ngModel。您在输入上同时使用 ngModel（基于模板驱动）和 formControlName（反应式表单）。

或者，如果您想将其与 ngModel 一起使用，请使用 [ngModelOptions]="{standalone: true}" 。它也在您的屏幕截图中指定。

请参考：https://github.com/angular/angular/pull/10314#issuecomment-242218563

【讨论】：