TypeError: Cannot read property 'bookIsbn' of undefined when used ngModel with anular materials

Question

I went through all the related issues, but can not find any proper answer. I am getting an error when using the [(ngModel)] with the angular material in forms data binding.

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() {
      }

    }

here I have created a class library item, in which the models are been created and the form data will be bound to.

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');
}

Error

Thanks in advance for considering my issue.

Why are you enclosing a value that is a boolean with brackets? It's not needed. — Edric, Nov 25 '18 at 12:06

score 1 · Answer 1 · answered Nov 23 '18 at 17:11

1

In your html you have used bookIsbn as a form validation input... but what you have done is adding a string as bookIsbn and try to read the properties... Check angular validation for proper validation.. https://angular.io/guide/form-validation

answered Nov 23 '18 at 17:11

Aadhil Musthaq

81
2

I did checked, yes I have used bookIsbn to form validation as well, but I don't think it should be affected, any I changed it, the same issue was reproducible. The error particularly says this section => [(ngModel)]="libraryItemModel.bookIsbn" If i replace it with ngModel it works fine. – Mohamed Sajjadh Nov 23 '18 at 18:28
ok, I could find a solution for this. I instantiated the object in "add-book.component.ts" instead of " app.component.ts". It worked. But if somebody could give a clear clarification of what happened it would be great?. Please refer this video (https://www.youtube.com/watch?v=2cWPk2X79is&index=7&list=PLC3y8-rFHvwhwL-XH04cHOpJnkgRKykFi&t=342s) reason why i instantiated in app.component.ts. – Mohamed Sajjadh Nov 23 '18 at 19:03
It bcus ur app.book.component.html is the html file of app.book.component.ts. but u were referring it to app.component.ts – Aadhil Musthaq Nov 26 '18 at 08:46

TypeError: Cannot read property 'bookIsbn' of undefined when used ngModel with anular materials

1 Answers1