Mat-select 默认值不适用于多种方式

Question

我正在使用 mat-select，当用户尝试更新信息时，我需要为其设置一个默认值。我正在使用 patchValue 来更新表单值并设置默认值，它适用于我的其他输入，除了 mat-select.

这是我的模板：

<form [formGroup]="profileForm" class="event-form w-100-p" fxLayout="column" fxFlex>
 ...

    <mat-form-field appearance="outline" fxFlex="100" required>
        <mat-label>Departement*</mat-label>
        <mat-select formControlName="Département">
             <mat-option *ngFor="let dept of departements" [value]="dept.id">
                {{dept.name}}
             </mat-option>
        </mat-select>
        <mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>
        <mat-error>Selecter le departement</mat-error>
    </mat-form-field>

这是我的 component.ts:

profileForm = this.fb.group({
    Nom_de_famille: ['' ,Validators.required],
    Prénom: ['' ,Validators.required],
    email: ['', [Validators.email, Validators.required]],
    Code_personnel: [Validators.compose([Validators.min(1000), Validators.max(9999)])], 
   //Validators.required
    N_tel: [''],
    birthday: [''],
    adresse: [''],
    lieu:[''],
    CIN:['',Validators.compose([Validators.min(10000000), Validators.max(99999999)])],
    Genre:[''],
    N_permis:[''],
    Département: ['',Validators.required]
  });

 ngOnInit() {
    this.ListDepartmentEntity.forEach(e=>{
      x++;
      this.departements.push({id:x, name:e.Name}); // to fill departement options
   });
   this.setdefaultformvalues(this.indata.SendData);
}

setdefaultformvalues(row) {
    let pos = 0, posDep = 0;
    this.departements.forEach(e => {
          pos++
          if(row.DepartmentId==e.id){
            posDep = pos; // to get current deparetement position
          }
    });
    if(row.CIN==''){
      row.CIN = null;
    }
   console.log(row.DepartmentString);
    this.profileForm.patchValue({
      Nom_de_famille: [row.FirstName],
      Prénom: [row.LastName],
      email: [row.Email],
      Code_personnel: [row.DriverCode],
      N_tel: [row.Tel],
      birthday: null,
      adresse: [row.Address],
      lieu:[row.BirthPlace],
      CIN:[row.CIN],
      Genre:[row.DriverLicenseType],
      N_permis:[row.DriverLicenseNumber],
      Département: this.departements[posDep]
    });
  }

Rq：我之前尝试过使用 [(value)] 和 ngModel，但没有任何反应。

Answer 1

你的值为id

[value]="dept.id"

改为

this.profileForm.patchValue({
  ... 
  Département: this.departements[posDep].id
});

Mat-select 默认值不适用于多种方式

Mat-select default value didn't work with multipule ways

formbuilder

typescript

angular