[(ngModel)]="binding" ionic 7

Ionic Framework
1

how to update [(ngModel)]=“binding” for new ionic 7

ionic 6
<ion-input type=“password” [(ngModel)]=“binding” required=“true”>

now ionic 7 ?

2

It works the same. Maybe try adding a name property with the name you’d like. It works for me.

<ion-input type=“password” [(ngModel)]=“binding” required=“true” name="binding">

Do you get any error? It would be helpful to see it.

3

<ion-input type=“password” [(ngModel)]=“campoSenha” required=“true”>

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 included in the ‘@Component.imports’ of this component.
  2. If ‘ion-input’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@Component.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@Component.schemas’ of this component.ngtsc(-998002)

home.page.ts(23, 33): Error occurs in the template of component HomePage.

Type ‘Event’ is not assignable to type ‘string’.ngtsc(2322)

home.page.ts(23, 33): Error occurs in the template of component HomePage.

import { Component, Renderer2 } from ‘@angular/core’;
import { IonicModule } from ‘@ionic/angular’;

import { AppComponent} from ‘./…/app.component’
import { DadosRota } from ‘./…/models/dados-rota’;
import { Inflogin } from ‘./…/models/inflogin’;

import { HTTP } from ‘@awesome-cordova-plugins/http/ngx’;

import { Router, NavigationExtras } from ‘@angular/router’;
import { NavController, AlertController } from ‘@ionic/angular’;

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

login: string = ‘’;
senha: string = ‘’;
mensagem: string = ‘’;
campoLogin: string = ‘’;
campoSenha: string = ‘’;

constructor(
public navCtrl: NavController,
private router: Router,
public alertController: AlertController,
private http: HTTP,
private renderer: Renderer2,
) { }

4

It looks like you are generating the '[(ngModel)]within a .component, not a page. In a page, if you notice, in the@Component ()decorator, you will find astandalone: trueandimports. Add imports: [FormsModule] to your component and that’s it.

1 Like
5

It worked, thank you very much

1 Like