Angular Material form controls mat-select -- mat-option,设置更新项的默认选项?
Angular Material form controls mat-select -- mat-option, setting the default option for updating items?
我有一个带有垫子 select 和垫子选项的表单,我正在构建一个可重复使用的组件,我可以在其中编辑任何项目。我正在尝试填写表单默认值,但在查看文档 30 分钟并尝试各种操作后,我似乎无法以任何方式设置默认 selected 选项。
<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] 但它只是出错,因为它显然不是输入 属性 尽管 it does show up in the documentation API here.
我认为这一定是可能的,否则它只会阻止任何带有 mat-select 的表格预填充 'updating' 函数。
我正在使用 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])
})
要select一个值作为默认值,你需要给你的控件一个想要的值。
这里有一个 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>
我有一个带有垫子 select 和垫子选项的表单,我正在构建一个可重复使用的组件,我可以在其中编辑任何项目。我正在尝试填写表单默认值,但在查看文档 30 分钟并尝试各种操作后,我似乎无法以任何方式设置默认 selected 选项。
<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] 但它只是出错,因为它显然不是输入 属性 尽管 it does show up in the documentation API here.
我认为这一定是可能的,否则它只会阻止任何带有 mat-select 的表格预填充 'updating' 函数。
我正在使用 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])
})
要select一个值作为默认值,你需要给你的控件一个想要的值。
这里有一个 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>