Angular 使用mat select和formControl设置默认值

我正在尝试为formControl设置默认值，但似乎不起作用

选择-hint-error-example.ts

选择-hint-error-example.html

浏览器输出

我需要在我的组件中使用formControl，如何设置默认值

闪电战

更新1

---

更新了问题结构，使用了外观更好的代码段而不是图像

如果使用object设置select的默认值，则必须使用compareWith函数

选择支持与输入进行比较。compareWith接受一个函数 它有两个参数：option1和option2。如果给出了compareWith， Angular根据函数的返回值选择选项

component.html

---

对于Chellapan答案的补充，如果你不想使用compareWith，你需要放置相同的对象，比如

animalControl = new FormControl(this.animals[2], [Validators.required]);
//or
const animal=this.animals.find(x=>x.name=='Cow')
animalControl = new FormControl(animal, [Validators.required]);

另一个解释是[value]是animal.name

<mat-option *ngFor="let animal of animals" [value]="animal.name">

但是您需要创建一个函数

searchAnimal(name)
{
   return name?this.animals.find(x=>x.name==name):null
}

如果你想用

  <mat-hint >{{searchAnimal(animalControl.value)?.sound}}</mat-hint>

---

您可以分离animalControl的声明和实例化，并在构造函数或ngOnit中设置默认值

export class SelectHintErrorExample {
  selectFormControl = new FormControl('', Validators.required);
  animals: Animal[] = [
    {name: 'Dog', sound: 'Woof!'},
    {name: 'Cat', sound: 'Meow!'},
    {name: 'Cow', sound: 'Moo!'},
    {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
  ];
  animalControl:FormControl;

  constructor(){
  this.animalControl = new FormControl(this.animals[2], [Validators.required]);
  }
}

---

你可能因为你的照片而从别人那里得到-1分。除息的

<mat-option *ngFor="let animal of animals" [value]="animal.name">

animalControl = new FormControl('Cow',[Validators.required]);

searchAnimal(name)
{
   return name?this.animals.find(x=>x.name==name):null
}

  <mat-hint >{{searchAnimal(animalControl.value)?.sound}}</mat-hint>

export class SelectHintErrorExample {
  selectFormControl = new FormControl('', Validators.required);
  animals: Animal[] = [
    {name: 'Dog', sound: 'Woof!'},
    {name: 'Cat', sound: 'Meow!'},
    {name: 'Cow', sound: 'Moo!'},
    {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
  ];
  animalControl:FormControl;

  constructor(){
  this.animalControl = new FormControl(this.animals[2], [Validators.required]);
  }
}