Блог

Пытаюсь следовать этому примеру подключения формы из учебных пособий Angular 2. Я адаптирую код для страницы входа в систему. https://angular.io/docs/ts/latest/guide/forms.html

Вот моя модель,

 export class LoginModel {
  constructor(
      public id: number,
      public password: string
  ) {}
}
  

Вот мой компонент,

 import { Component, OnInit } from "@angular/core";

import { LoginModel } from "../Models/login.model";

@Component({
   selector: "login-form",
   templateUrl: "views/login.component.html",
})
export class LoginComponent implements OnInit {
   model = new LoginModel(111, "true");
   submitted = false;

   ngOnInit() {
      this.model.id = 111;
      this.model.password = "true";
   }

   onSubmit(): void {
       this.submitted = true;
   }

   // remove - used for debugging
   get diagnostic(): string {
       return "HERE: "   JSON.stringify(this.model);
   }
}
  

OnInit в компоненте, вероятно, не нужен, просто подумал, что попробую.

Наконец, вот мой HTML,

 <div class="container">
<h1>Login Form</h1>
{{diagnostic}}
<form *ngIf="model">
    <div class="form-group col-md-6">
        <label for="id">User ID:</label>
        <input type="text" class="form-control" id="id" name="id"
            required
            [(ngModel)]="model.id"
        >
    </div>
    <div class="form-group col-md-6">
        <label for="password">Password</label>
        <input type="text" class="form-control" id="password" name="password"
            required
            [(ngModel)]="model.password"       
        >
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
  

Ошибка, с которой я продолжаю сталкиваться, заключается в том, что «model.id » не определено. Чтобы проверить это, я добавил *ngIf=»модель». Я не уверен, почему модель отображается здесь как неопределенная, когда она определена в LoginComponent, который импортируется через мой модуль.

Любая помощь была бы весьма признательна Я застрял на этом бите на некоторое время и не смог найти ничего полезного в Интернете.

У нас нет всего кода, но я думаю, что у вас могут быть импортированы не все необходимые модули. Похоже, вам не хватает FormsModule и ReactiveFormsModule

Вот плунжер, который я создал на основе кода, предоставленного вами выше, и я заполнил пробелы для отсутствующего NgModule определения: Плунжер