Ng model not working. (app.component.html - ionic v5)

Ionic Framework Ionic Angular
1

ng model not working in app.component.html file. What should I do?

Thanks in advance.

  <!-- Category Edit Form-->
          <ion-card class="ion-padding" *ngIf="EditForm">
            <ion-label position="stacked"> <strong>Edit Category</strong></ion-label>      
            <ion-input type="text" [(ngModel)]="UpdateCategory"> </ion-input>
            
            <div>
              <ion-icon  class="ion-float-right"  name="checkmark-outline" size="large"  slot="icon-only"  color="primary"></ion-icon>
              <ion-icon  class="ion-float-left" (click)="closeForm()" name="close-outline"  size="large" slot="icon-only"  color="danger"></ion-icon>      
            </div>
            <br/>
          </ion-card>

Error Message

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘ion-input’.

  1. If ‘ion-input’ is an Angular component and it has ‘ngModel’ input, then verify that it is part of this module.

  2. If ‘ion-input’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.ng

ErrorImage_app.component.html
ErrorImage_app.component.html1013×664 44.5 KB

app.component.ts
app.component.ts1001×620 29.2 KB

AppImage
AppImage285×502 10.2 KB

2

Stop posting images as text and import FormsModule.

3 Likes
3

Thank you very much for your reply.

Can you sample the use of the Forms Module or suggest a resource?

4

I have the same issue. Have you find a solution ?

I did this:
import { FormsModule } from ‘@angular/forms’

@NgModules({
…
imports: [ … , FormsModule ],
…
})

but not work for me, perhaps, I am in my component.

I used (ionChange) and (ionInput) in ionic 4, but it does not work now, the event haven’t the value because I can’t cast it to TextInput, this type doesn’t exist anymore

5

<ion-input [value]=“myData” (ionChange=“onChange($event,data)”>

onChange(event:any,value:any){
console.log(event.detail.data)
}