TypeError: Cannot read property 'bookIsbn' of undefined when used ngModel with anular materials
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
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.
angularjs-directive angular-material ng-modules
asked Nov 23 '18 at 16:25
Mohamed SajjadhMohamed Sajjadh
166
add a comment |
0
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.
angularjs-directive angular-material ng-modules
asked Nov 23 '18 at 16:25
Mohamed SajjadhMohamed Sajjadh
166
Why are you enclosing a value that is a boolean with brackets? It's not needed.
– Edric
Nov 25 '18 at 12:06
add a comment |
0
0
0
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.
angularjs-directive angular-material ng-modules
asked Nov 23 '18 at 16:25
Mohamed SajjadhMohamed Sajjadh
166
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.
angularjs-directive angular-material ng-modules
angularjs-directive angular-material ng-modules
asked Nov 23 '18 at 16:25
Mohamed SajjadhMohamed Sajjadh
166
asked Nov 23 '18 at 16:25
Mohamed SajjadhMohamed Sajjadh
166
edited Nov 23 '18 at 19:00
Mohamed Sajjadh
asked Nov 23 '18 at 16:25
Mohamed SajjadhMohamed Sajjadh
166
asked Nov 23 '18 at 16:25
Mohamed SajjadhMohamed Sajjadh
166
asked Nov 23 '18 at 16:25
Mohamed SajjadhMohamed Sajjadh
166
166
Why are you enclosing a value that is a boolean with brackets? It's not needed.
– Edric
Nov 25 '18 at 12:06
add a comment |
Why are you enclosing a value that is a boolean with brackets? It's not needed.
– Edric
Nov 25 '18 at 12:06
Why are you enclosing a value that is a boolean with brackets? It's not needed.
– Edric
Nov 25 '18 at 12:06
Why are you enclosing a value that is a boolean with brackets? It's not needed.
– Edric
Nov 25 '18 at 12:06
add a comment |
1 Answer
1
active
oldest
votes
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 MusthaqAadhil Musthaq
261
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 (youtube.com/…) 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 8:46
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450078%2ftypeerror-cannot-read-property-bookisbn-of-undefined-when-used-ngmodel-with-a%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 MusthaqAadhil Musthaq
261
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 (youtube.com/…) 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 8:46
add a comment |
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 MusthaqAadhil Musthaq
261
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 (youtube.com/…) 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 8:46
add a comment |
1
1
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 MusthaqAadhil Musthaq
261
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 MusthaqAadhil Musthaq
261
answered Nov 23 '18 at 17:11
Aadhil MusthaqAadhil Musthaq
261
answered Nov 23 '18 at 17:11
Aadhil MusthaqAadhil Musthaq
261
answered Nov 23 '18 at 17:11
Aadhil MusthaqAadhil Musthaq
261
261
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 (youtube.com/…) 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 8:46
add a comment |
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 (youtube.com/…) 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 8:46
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
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 (youtube.com/…) reason why i instantiated in app.component.ts.
– Mohamed Sajjadh
Nov 23 '18 at 19:03
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 (youtube.com/…) 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 8:46
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 8:46
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450078%2ftypeerror-cannot-read-property-bookisbn-of-undefined-when-used-ngmodel-with-a%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Why are you enclosing a value that is a boolean with brackets? It's not needed.
– Edric
Nov 25 '18 at 12:06