Блог

Главная - Вопросы по программированию - ionic и angular ngModel не работают, не определено

ionic и angular ngModel не работают, не определено

#angular #ionic-framework

#angular #ionic-framework

Вопрос:

Я пробую это на ionic angular:

login-component.html:

 <ion-content [fullscreen]="true">
  <div>
    <div style="margin-left:10%; margin-right:10%; margin-top: 5%;">
      <ion-input [(ngModel)]="username" placeholder="Nombre de usuario"></ion-input>
      <br>
      
      {{username}}
      
      <ion-input [(ngModel)]="password" type="password"  placeholder="Contraseña" ></ion-input>
    </div>
  </div>

  <div style="margin-left:10%; margin-right:10%; margin-top: 5%;">
    <ion-button (click)="login()">Acceder</ion-button>
    <ion-button>Cancelar</ion-button>
  </div>
</ion-content>

login-component.ts:

 import { Component, OnInit } from '@angular/core';
import { AuthenticationLoginService } from 'authentication-login';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
  public username: string;
  public password: string;

  constructor(
    loginService: AuthenticationLoginService
  ) { }

  ngOnInit() {}

  async login() {
    alert(`hola ${this.username}!`);
  }
}

Когда я нажимаю кнопку, появляется предупреждение с надписью hola undefined!
Если я инициализирую имя пользователя некоторыми данными, оно правильно отображается в строке {{username}}, поэтому по какой-то причине кажется, что директива [(ngModel)] не работает. Консоль браузера и команда ionic serve не показывают ошибок.

ионная информация:

 Ionic:

   Ionic CLI                     : 6.11.8 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.2
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.1.0) : 0.2.5

System:

   NodeJS : v14.10.1 (/usr/bin/node)
   npm    : 6.14.8
   OS     : Linux 4.19

Есть идеи? заранее спасибо.-

Немецкий

Комментарии:

1. Импортировали ли вы FormsModule в свой файл Login module.ts? Если это модуль с отложенной загрузкой, то вам нужно добавить FormsModule, чтобы заставить входные данные работать.

Ответ №1:

Решено. Как говорит @Pankaj Sati, необходимо добавить FormsModule и IonicModule в файл module.ts:

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';

import { AuthenticationRoutingModule } from './authentication-routing.module';

import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    CommonModule,
    AuthenticationRoutingModule,
    IonicModule,
    FormsModule,
  ]
})
export class AuthenticationModule { }

После этих изменений все работает как по маслу.
Приветствия