I want to hide and show input fields when click on a button

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

Why you are using both [(ngModel)] and formControlName together? It is not valid. — Tushar, Jan 24 '20 at 07:27

score 0 · Answer 1 · answered Jan 24 '20 at 07:27

0

You can't use both formControl and ngModel, just use one of them.

answered Jan 24 '20 at 07:27

But to store data in database we use formControlName and i use it another form also it is working – Mahak Garg Jan 24 '20 at 07:30
https://angular.io/api/forms/FormControlName#use-with-ngmodel – Jan 24 '20 at 10:33

score 0 · Answer 2 · answered Jan 24 '20 at 07:30

0

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

answered Jan 24 '20 at 07:30

Shubham Bhokare

116
1
2
7

but in my other forms i used same formConrolName and ngModel together and it will work nicely – Mahak Garg Jan 24 '20 at 07:32
Have a look here - (https://stackoverflow.com/questions/39126638/ngmodel-cannot-be-used-to-register-form-controls-with-a-parent-formgroup-directi) – Shubham Bhokare Jan 24 '20 at 07:35

Srishti Khandelwal · Answer 3 · 2020-01-24T07:45:51.733

0

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

edited Jan 24 '20 at 07:45

answered Jan 24 '20 at 07:33

Srishti Khandelwal

587
4
14

I want to hide and show input fields when click on a button

3 Answers3