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

.html file

<ion-content padding>
    <div >
        <form [formGroup]="form1" (ngSubmit)="saveEntry1()">
        <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 [(ngModel)]="sub" name="sb">
                     <ion-option *ngFor="let item1 of items1" [value]="item1.subname">{{item1.subname}}</ion-option>
        <ion-label> Date:</ion-label>

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

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


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.

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:


1 Like