web-dev-qa-db-ja.com

Angular Material form controls mat-select-mat-option、setting the default option for update 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に表示されます

私はこれが可能であるに違いないと考えています。それ以外の場合は、「選択」機能を備えたフォームを事前選択して「更新」機能を事前に防ぐだけです。

Angular Material 7 with 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])
})
angularangular-materialangular-reactive-formsangular-formsangular-material-7
4
MichaelB

デフォルトとして値を選択するには、コントロールに必要な値を与える必要があります。

以下に、それを示す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>
4
user4676340