I try to load to the form the values of the object when I click the form opens i got an undefined data error.

I got to conclusion that my error is because I don't give the value right to the mat-select.

in the ngOnInit() of the diaog i call the api for the data i want to put in the mat-select.

this is the func:

getAuthors() {
this._authorService.getAuthors().subscribe(result => {
  this.authrosDb = result;
  console.log(this.authrosDb.data);
});

}

when i do the console log i do get the values but the error saying that the data is undefined,so i got to the conclusion that this is might happening because the select loads before the data is passed. when i open the add form i can add all and see the values in the select. This is the add form with the values

but when i want to update all the inputs beside the select has the values of the row

this is the udate from all have values only the selct isnt

this is the select author section in my form:

<mat-form-field  appearance="fill">
    <mat-label>Author</mat-label>
    <mat-select formControlName="authorId" placeholder="Author">
        <mat-option *ngFor="let author of authrosDb.data" value={{author.authorId}}> 
      {{author.authorName}}</mat-option>
    </mat-select>
</mat-form-field

and this is how I give the values to my inputs :

ngOnInit(): void {
  this.getAuthors();
  this.getGenres();
  if (this.data.id != '' && this.data.id != null) {
    this._bookService.getBook(this.data.id).subscribe(response => {
      this.editBook = response;
      console.log(this.editBook);
      this.bookForm.setValue({
        bookId: this.editBook.data.bookId,
        bookName: this.editBook.data.bookName,
        authorId: this.editBook.data.authorId,
        bookPublishedYear: this.editBook.data.bookPublishedYear,
        genreId: this.editBook.data.genreId,
        bookLanguage: this.editBook.data.bookLanguage,
        bookNumOfPages: this.editBook.data.bookNumOfPages,
        bookCopys: this.editBook.data.bookCopys
      });
    });
  }
}

this is bookForm:

bookForm = this.builder.group({
    bookId: this.builder.control({ value: '', disabled: true }),
    bookName: this.builder.control('', Validators.required),
    authorId: this.builder.control('', Validators.required),
    bookPublishedYear: this.builder.control('', Validators.required),
    genreId: this.builder.control('', Validators.required),
    bookLanguage: this.builder.control('', Validators.required),
    bookNumOfPages: this.builder.control('', Validators.required),
    bookCopys: this.builder.control('', Validators.required)
  });

Html

tho its adding and updating the right values. I'm new to angular so it's be helpful if anyone could explain my mistake and show me how to fix it, thx in advance!.

CodePudding user response：

Use "safe operator" in .html to avoid initial error (at first authrosDb imagine is null)

<!--see the "?" between authrosDb and .data-->
<mat-option *ngFor="let author of authrosDb?.data" value={{author.authorId}}>

or declare in .ts your variable authrosDb with data

authrosDb:any={data:[],...rest of properties}

BTW. two things

1. Use [value]="author.authorID" instead of value={{author.authorID}}. If author.authorID is a number the interpolation (the {{``}} convert the value to a string else the binding (the [ ]) not do it
2. I suggest you change the name authrosDb by authorsDb, for me is confusing (and I imagine for you when you see the code after some days)

CodePudding user response：

Did you assign a formGroup attribute to the <form> tag in your template? It should look like this:

<form [formGroup]="bookForm"></form>

Only then you are able to set the formControlName attributes for the group's controls.