TypeError: Невозможно прочитать свойство 'bookIsbn' неопределенного при использовании ngModel с анулярными материалами - PullRequest
0 голосов
/ 23 ноября 2018

Я прошел через все сопутствующие вопросы, но не могу найти правильного ответа.Я получаю сообщение об ошибке при использовании [(ngModel)] с угловым материалом в привязке данных форм.

add-book.component.html

    <html>
<head>
  <title>
    Create Book
  </title>
</head>

<header>
  <h2 class="form_heading"> Create New Book </h2>
</header>

<body class="create_Book_Body">
<form name="createBookForm" #createBookForm="ngForm">

  {{libraryItemModel | json}}


  <mat-form-field class="form_Field">
    <input type="text" pattern="[0-9]*" minlength="5" maxlength="5" min="10000"  name="bookIsbn" #bookIsbn="ngModel" [(ngModel)]="libraryItemModel.bookIsbn" matInput
           placeholder="DVD ISBN NO" required>
    <div *ngIf="((bookIsbn.touched) && !(bookIsbn.valid))">
      <div *ngIf="bookIsbn.errors.required">
        <mat-error >
          This field is required/Invalid
        </mat-error>
      </div>

      <div *ngIf="bookIsbn.errors.minlength">
        <mat-error >
          ISBN should be of 5 characters
        </mat-error>
      </div>

      <div *ngIf="bookIsbn.errors.pattern">
        <mat-error >
          Invalid Pattern
        </mat-error>
      </div>
    </div>
  </mat-form-field>
</form>
</body>
</html>

add-book.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';


    @Component({
      selector: 'app-add-book',
      templateUrl: './add-book.component.html',
      styleUrls: ['./add-book.component.css']
    })
    export class AddBookComponent implements OnInit {

      onSubmit($event) : void {
        console.log(($event));
      }

      constructor() { }

      ngOnInit() {
      }

    }

здесь я создал элемент библиотеки классов, в котором создаются модели и к которым будут привязаны данные формы.

library-item.ts

export class LibraryItem {

  constructor(
    public bookIsbn : string

  ){}

}

app.component.ts

import { Component } from '@angular/core';
import {LibraryItem} from './library-item';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Lib_Manager';

  inputText : string = 'initial Value'

   libraryItemModel = new LibraryItem('12345');
}

Ошибка Console error message

Заранее спасибо за рассмотрение моей проблемы.

1 Ответ

0 голосов
/ 23 ноября 2018

В вашем html вы использовали bookIsbn в качестве входных данных для проверки правильности формы ... но вы добавили строку как bookIsbn и попытались прочитать свойства ... Проверьте правильность проверки углов для правильной проверки .. https://angular.io/guide/form-validation

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...