Error while using formGroup to retrieve input field value into the .ts file

Ionic Framework ionic-v3
1

.html file

<ion-content padding>
    <div >
        <form [formGroup]="form1" (ngSubmit)="saveEntry1()">
    <ion-item>
    <ion-label>Class</ion-label>
        <ion-select  [(ngModel)]="abc" name="cls" (ionChange)="saveEntry(abc)">
          <ion-option *ngFor="let item of items" [value]="item.class_id">{{item.class_id}}</ion-option>
        </ion-select>
    </ion-item>
             <ion-item>
                 <ion-label>Subject</ion-label>
                 <ion-select [(ngModel)]="sub" name="sb">
                     <ion-option *ngFor="let item1 of items1" [value]="item1.subname">{{item1.subname}}</ion-option>
                 </ion-select>
             </ion-item>
    <ion-item>
        <ion-label> Date:</ion-label>

        <ion-datetime formControlName="ldate" name="ldate" pickerFormat="MMMM DD YYYY" min="2018" max="2020" [(ngModel)]="myDate">
        </ion-datetime>

    </ion-item>
<ion-item>
          <ion-label formControlName="report" floating border="double">Report</ion-label>
          <ion-textarea class="hei"></ion-textarea>
      </ion-item>
 <div text-center>
 <button ion-button [disabled]="!form.valid" color="secondary">Submit</button>
 </div>
        </form>
    </div>

</ion-content>

Error i am getting

Uncaught (in promise): Error:
ngModel cannot be used to register form controls with a parent formGroup directive. Try using
formGroup’s partner directive “formControlName” instead.

2

Exactly as it says: You can’t use ngModel inside a formGroup directive.
You should create formControls for your ‘abc’ and ‘sub’ and use them in instead of the ngModel.

Read the docs for more info:

3

See:

sign-in-page-1
sign-in-page-1.jpg373×667 54.6 KB

1 Like