是否可以显示选择初始值的角度材料的多选组件？

Question

在本例中：https://stackblitz.com/edit/angular-ivy-byvfjy?file=src/app/ofertas/filtro-ofertas/filtro-ofertas.component.ts

我有一个多选表单控件

<form [formGroup]="form">
 <mat-form-field appearance="outline">
  <mat-select formControlName="años" multiple placeholder="Años">
   <mat-option *ngFor="let year of years" [value]="year">{{year}}</mat-option>
  </mat-select>
 </mat-form-field>

但我想将实际年份标记为默认选择，即 2021

export class FiltroOfertasComponent implements OnInit {
 private now:Date=new Date();
 actualYear:number=this.now.getFullYear();
 years:number[]=[this.actualYear-2, this.actualYear-1, this.actualYear];

 form: FormGroup;

 formularioOriginal = {
   años:[this.actualYear],
   fechaPresentada: '',
   descripcion: '',
   organismoId: 0,
   presentada: false,
   adjudicada: false
 }

 constructor(private formBuilder: FormBuilder) { }
 this.form = this.formBuilder.group(this.formularioOriginal);

但这并没有在设置原始表单时显示默认选择值

这两个都没有

formularioOriginal = {
años:this.actualYear,
fechaPresentada: '',
descripcion: '',
organismoId: 0,
presentada: false,
adjudicada: false

}

这个也没有

this.form = this.formBuilder.group(this.formularioOriginal);

this.form.patchValue({
  años:this.actualYear
});

作为一个多选我不知道如何将初始值传递给它

有什么想法吗？

谢谢

Answer 1

您收到以下错误消息：

ERROR
Error: Uncaught (in promise): Error: Value must be an array in multiple-selection mode.
Error: Value must be an array in multiple-selection mode.

有两种方法可以将默认值作为数组传递给多选：

要么在构建表单后修补值：

this.form.patchValue({
 años: [this.actualYear]
});

或者您在表单构建器中设置值，在您的代码中它看起来像这样：

 formularioOriginal = {
    años:[[this.actualYear]],
    fechaPresentada: '',
    descripcion: '',
    organismoId: 0,
    presentada: false,
    adjudicada: false
   }

由于表单构建器需要默认值或数组（包含默认值、验证器、异步验证器），因此您需要使用两组括号将数组定义为默认值。 请参阅此处的官方 Angular 文档中的示例： https://angular.io/guide/reactive-forms#validating-form-input