簡體   English   中英

Angular Material窗體控制mat-select - mat-option,設置更新項目的默認選項?

[英]Angular Material form controls mat-select — mat-option, setting the default option for updating items?

我有一個帶有墊選項的墊子選項,我正在構建一個可重復使用的組件,我可以在那里編輯任何項目。 我正在嘗試填寫表單默認值,但在文檔中查找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>```

我已經嘗試使用[選擇],但它只是錯誤,因為它顯然不是輸入屬性,雖然它確實顯示在文檔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])
})

要選擇默認值,您需要為控件提供所需的值。

這是一個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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM