Ionic 4 - Двухстороннее связывание с ионным вводом

Question

В Ionic 4 как вы делаете двустороннюю привязку. В Ionic 3 я бы сделал следующее:

<ion-item color="light"> <ion-input type="string" placeholder="Username" [(ngModel)]="username"></ion-input> </ion-item>

Однако в Ionic 4 я получаю следующую ошибку:

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. ("d>
          <ion-item color="light">
              <ion-input type="string" placeholder="Username" [ERROR ->][(ngModel)]="username"></ion-input>
          </ion-item>
          <ion-item color="light">
"): ng:///AppModule/LoginPage.html@12:62

Как мне заставить это работать в Ionic 4?

Answer 1

Ионный 3/4 с угловым 6

Чтобы использовать двустороннюю привязку данных для ввода формы, вам необходимо импортировать пакет FormsModule в ваш угловой модуль. Для получения дополнительной информации см. Официальный учебник Angular здесь

Например

import { FormsModule } from '@angular/forms';

[...]

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

Answer 2

Вам просто нужно импортировать FormsModule в app.module.ts . Как я уже дал ответ подробно. Посетите ссылку для деталей https://stackoverflow.com/a/55684045/7983887

Answer 3

Не забудьте добавить FormsModule в свой модуль или создать SharedModule для импорта и экспорта FormsModule

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule { }