是否可以显示初始值为 selected 的 angular material 的多个 select 组件？

Question

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

我有一个多select表单控件

<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>

但我想将实际年份标记为 select，即 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);

但这并没有显示设置原始形式时的默认 selected 值

这都不是

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
});

是一个multi-select不知道怎么给它传初值

有什么想法吗？

谢谢

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.

有两种方法可以将默认值作为数组传递给 multi-select:

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

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

是否可以显示初始值为 selected 的 angular material 的多个 select 组件？

is it possible to show an angular material's multi select component with initial value selected?

angular

angular-material

angular-forms