4

我有一个带有垫子选项的垫子选择的表单，我正在构建一个可重用的组件，我可以在其中当场编辑任何项目。我正在尝试填写表单默认值，但是在查看文档 30 分钟并尝试了各种方法之后，我似乎无法以任何方式设置默认选择选项。

    <mat-form-field>
        <mat-select [selected]="isSelected()" formControlName="category"  placeholder="Select a category">
          <mat-option *ngFor="let category of videoCategories | async" [value]="category.id">
              {{ category.name }} 
          </mat-option>
        </mat-select>
      </mat-form-field>```

我尝试使用该 [selected] 但它只是出错，因为它显然不是输入属性，尽管它确实出现在文档 API 中。

我认为这必须是可能的，否则它只会阻止任何带有 mat-select 的表单来预填充“更新”功能。

我将 Angular Material 7 与 Angular 7 一起使用。

编辑：

我的表单控制代码：

this.editVideoForm = new FormGroup({
  title: new FormControl(this.videoTitle, [Validators.required, Validators.minLength(3), Validators.maxLength(50)]),
  description: new FormControl(this.videoDescription, [Validators.required, Validators.minLength(5), Validators.maxLength(200)]),
  category: new FormControl(this.categoryID, [Validators.required]),
  link: new FormControl("https://vimeo.com/" + this.videoLink, [Validators.required, AddVideoValidators.mustBeVimeo, Validators.maxLength(100)]),
  visibleToGuests: new FormControl(this.visibleToGuests, [Validators.required])
})
4

1 回答 1

4

要选择一个值作为默认值，您需要为控件提供所需的值。

这是一个 stackblitz 向您展示：https ://stackblitz.com/edit/angular-gqw9yb?file=app/select-multiple-example.ts

export class SelectMultipleExample {
  toppings = new FormControl('Mushroom');
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

<mat-select placeholder="Toppings" [formControl]="toppings">
  <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
于 2018-11-05T11:13:42.393 回答