Question

我正在创建一个select元素，并希望在应用程序启动时将对象设置为默认值。在我的示例中，我有一个动物列表，以及HTML模板中使用的FormControl。我尝试将一个对象（不是对象的引用）直接添加到formControl，如下所示：

animalControl = new FormControl({name:'Dog', sound: 'Woof!'}, [Validators.required]); // this does not work

这不起作用。但是，引用实际列表中的对象可以正常工作，如下所示：

this.animalControl.setValue(this.animals[1]); // this works

是否有另一种方法可以将值设置为formControl，而无需找到正确的引用，只需将对象传递给它？

工作示例：https://stackblitz.com/edit/angular-object-default-select?file=app/select-hint-error-example.ts

TS：

 export class SelectHintErrorExample {
  animalControl = new FormControl({name:'Dog', sound: 'Woof!'}, [Validators.required]); // this does not work

  animals = [
    {name: 'Dog', sound: 'Woof!'},
    {name: 'Cat', sound: 'Meow!'},
    {name: 'Cow', sound: 'Moo!'},
    {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
  ];
  constructor(){
    // this.animalControl.setValue(this.animals[1]); // this works
  }

}

HTML：

<mat-form-field>
  <mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
    <mat-option>--</mat-option>
    <mat-option *ngFor="let animal of animals" [value]="animal">
      {{animal.name}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>
  <mat-hint>{{animalControl.value?.sound}}</mat-hint>
</mat-form-field>

Answer 1

如果您不想创建引用，可以在选择中使用compareWith，就像在任何其他select标记上一样：

<mat-select [compareWith]="compareAnimals" ...

和TS：

compareAnimals(a1: any, a2: any): boolean {
  return a1 && a2 ? a1.name === a2.name : a1 === a2;
}

你的StackBlitz：https://stackblitz.com/edit/angular-object-default-select-ervu6r?file=app%2Fselect-hint-error-example.ts

Answer 2

使用FormBuilder https://angular.io/guide/reactive-forms#introduction-to-formbuilder。您必须决定是否要使用FormArray

//If a only animal
createForm(data:any)
{
  this.animalcontrol=this.fb.group({
      name: [data.name?data.name:'',Validators.Required],
      sound:[data.sound=data.sound:'']
    });
}

如果您想使用formArray，请检查Angular 5 populate data with FormArray

如何在Angular FormControl中使用对象作为默认值（不使用引用）？

2 个答案: