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

Question

Page.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;
               }

It will give formcontrol error like below:

I can't understand where am going wrong please help me. I want to show input fields when I click on a button and also hide when I click on it. but give error please help for this. Thank you for your help

Answer 1

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

Answer 2

Read through the error screenshot you have posted. It has explanation. If you want to use both formControlName and ngModel use [ngModeloptions]="{standalone:true}"

Answer 3

Remove ngModel from the input tag. You are using both ngModel (Template-driven based) as well as formControlName(Reactive form) on the input.

Or if you want to use it with ngModel then use [ngModelOptions]="{standalone: true}" with it. It is specified in your screenshot also.

Refer this: https://github.com/angular/angular/pull/10314#issuecomment-242218563