Я прошел через все сопутствующие вопросы, но не могу найти правильного ответа.Я получаю сообщение об ошибке при использовании [(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');
}
Ошибка
Заранее спасибо за рассмотрение моей проблемы.