在angular6中为“编辑”表单预先选择的选项（“下拉”）

Question

i create a edit form for add-category in my site .

i need when enter the edit page it selected category value for dropdown .

1 - i send the request to server for get detail :

  public GetCatDetail(id:number){
    this.catService.GetCatDetail(id).subscribe((data)=>{
    this.cat=data,
    this.editCatFG.setValue({
      pFaName:[data.pFaName],
      pEnName:[data.pEnName],
      subCat:[data.subCat]
    }),
    this.selectedCat=data.subCat
  })
  }

2- send a request to server for get category list to fill dropdown .

 public GetAllCat(){
  this.catService.GetAllCatList().subscribe((data)=>{
  this.cats=data
  })
 }

3- i fill the dropdown in html :

    <select style="margin-right: 105px;" name="roleLevel" formControlName="subCat" [(ngModel)]="selectedCat">
                    <option  selected>    دسته اصلی </option>
                    <option *ngFor="let cat of cats" selectedCat="cat.id" [value]="cat.id" >{{cat.pFaName}}</option>
     </select>

I now need to select the value that exists for the categories in the databaseand selected that in the form in the dropdown.

how can i do this ?

Answer 1

When the array used for options list is of complex objects than just string or number , you need to use ngValue . Try this:

Update: Adding compareWith to select the default value

<select style="margin-right: 105px;" name="roleLevel" formControlName="subCat" [(ngModel)]="selectedCat" [compareWith]="compareById">
                    <option *ngFor="let cat of cats"  [ngValue]="cat" >{{cat.pFaName}}</option>
     </select>

In your component:

compareById(o1, o2) {
    return o1.id === o2.id
  }

If cat.id = 0 is not coming from the service, you can add it to the array like this:

public GetAllCat(){
  this.catService.GetAllCatList().subscribe((data)=>{
  this.cats=data
  //adding the value for id=0;
  this.cats.push({id:0, pFaName: '    دسته اصلی '});
  })
 }