Cannot bind [(ngModel)] into angular 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!