Cannot bind [(ngModel)] into angular html - html

Question

I am trying to achieve edit form with angular and I am having an error from binding value with [(ngModel)]
ERROR TypeError: Cannot read property 'name' of undefined
Here is my typescript code:
import { Component, OnInit } from "#angular/core";
import { HttpService } from "./../http.service";
import { ActivatedRoute, Router } from "#angular/router";
#Component({
selector: "app-edit",
templateUrl: "./edit.component.html",
styleUrls: ["./edit.component.scss"],
})
export class EditComponent implements OnInit {
id: string;
private sub: any;
author: any;
error: any;
constructor(
private _httpService: HttpService,
private _route: ActivatedRoute,
private _router: Router
) {}
ngOnInit() {
this.sub = this._route.params.subscribe((params) => {
this.id = params["id"];
});
this.oneAuthorInfoRetrieve();
}
oneAuthorInfoRetrieve() {
let observable = this._httpService.getOneTask(this.id);
observable.subscribe((data) => {
console.log("Successfully got data from get one author", data);
this.author = data["data"];
});
}
onEdit() {
let observable = this._httpService.editTask(this.id, this.author);
observable.subscribe((data) => {
console.log("Successfully update", data);
});
}
}
And here is my HTML code:
<a [routerLink]="['/home']"> Home </a>
<b>
<p>Edit this Author:</p>
</b>
<form class="border">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" class="form-control" name="name" [(ngModel)]="author.name">
</div>
<div class="form-group">
<button class="btn btn-danger" id="cancel">Cancel</button>
<button class="btn btn-primary" id="submit" (click)="onEdit()">Submit</button>
</div>
</form>
What can I do to fix this error?

Answer 1

DemoCreate your author model rather than using any
export class Author{
public name:string="";
constructor(){}
}
then in component
author: Author;
in ngOnInit or constructor initialize it
this.author=new Author();

Answer 2

You have this error because author is undefined. You can add a value to author throw a constructor or simply at the declaration author: any = {};
Or, you can display the form only of author is defined :
<form class="border" *ngIf="!!author">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" class="form-control" name="name" [(ngModel)]="author.name">
</div>
<div class="form-group">
<button class="btn btn-danger" id="cancel">Cancel</button>
<button class="btn btn-primary" id="submit" (click)="onEdit()">Submit</button>
</div>
</form>

Answer 3

You have to initialize object author. Because at first author.name does not exist.
Solution:
// declare author such as
author = {};// not null

Answer 4

The answer as you see that the author is undefined, and this also appears whenever an instance is undefined but you try to access it's properties!
Ex:
[(ngModel)]="author.name" // But author is undefined, it'll tell you that the 'name' is undefined,
// instead of 'author' remember this.
But if [(ngModel)]="author" // This will never cause an error
One more thing, author = {}; will not solve your problem, you should define a class (Recommended) like author = new author('Fes', 'Nguyen'); because {} have no property if you don't init or set value for it pro!