'ngModel' cannot be binded to 'ion-input'

Question

I am using ionic 7 with angular to build social app and I want to use two way binding to get the data from the input field but ngModel is not recognise Here is the html content:

<div class="post-input">
<ion-item>
  <ion-input
    placeholder="Write your today's post ..."
    [(ngModel)]="postText"
    [ngModelOptions]="{standalone: true}"
  ></ion-input>
</ion-item>
<ion-button class="post-btn" color="medium" (click)="post()">
  <ion-icon name="pencil-outline"></ion-icon>
</ion-button>

and the ts file:

import { Component } from '@angular/core';
import { IonicModule } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [IonicModule],
})
export class HomePage {

  postText!: string
  constructor() {}

  post() {

  }
}

Now I am getting the error Can't bind to 'ngModelOptions' since it isn't a known property of 'ion-input' and the old solutions is not working.

@Xyz.WebDeveloper its a standalone component so you need to import the FormsModule in the component to access it. — Henrik Bøgelund Lavstsen, Mar 31 '23 at 06:32

JSON Derulo · Answer 1 · 2023-03-31T07:29:41.107

The inputs for template-driven forms, such as ngModel and ngModelOptions, are only available when importing FormsModule in your standalone feature component (or feature module):

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [IonicModule, FormsModule],
})

It's not enough to import FormsModule in your standalone root component (or root module).

For more information, see the Angular guide on building a template-driven form.

score 1 · Answer 2 · answered Mar 31 '23 at 06:22

1

Make sure you have imported the FormsModule in your app.module.ts file.

import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [
    FormsModule
  ]
})

If you are still having an issues, make sure you have imported "Ionicmodule" and "Commonmodule" in your app.module.ts file.

import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';

@NgModule({
   imports: [
    IonicModule,
    CommonModule,
    FormsModule       
   ],  
})

answered Mar 31 '23 at 06:22

Prajapati Vikas

294
1
10

1

There is no app.module.ts in ionic 7 – Xyz.WebDeveloper Mar 31 '23 at 06:23
if you are using Angular with IONIC then app.Module.ts file must be there. Path is "src/app" folder. – Prajapati Vikas Mar 31 '23 at 06:25
It isn't available in ionic 7. I tried the above solution where I import it in my standalone component and it worked – Xyz.WebDeveloper Mar 31 '23 at 06:28
glad to hear that your problem has been solved – Prajapati Vikas Mar 31 '23 at 06:31
1

This answer is not correct. The `FormsModule` needs to be imported in the *feature* module and not in the *root* module. – JSON Derulo Mar 31 '23 at 07:40
@JSONDerulo refer article https://www.geeksforgeeks.org/angular-formsmodule-directive/ – Prajapati Vikas Mar 31 '23 at 08:52
The example in this article only works because for the sake of simplification, the code lives in `app.component.html`. However in real world, this is very rarely the case. Also in the question the code is clearly not in the root (app) component. – JSON Derulo Mar 31 '23 at 09:18

'ngModel' cannot be binded to 'ion-input'

2 Answers2