Форма углового материала управляет mat-select - mat-option, устанавливая опцию по умолчанию для обновления предметов? - PullRequest
Новая
       45

Форма углового материала управляет mat-select - mat-option, устанавливая опцию по умолчанию для обновления предметов?

0 голосов
/ 05 ноября 2018

У меня есть форма с выбором мата с параметрами мата, и я создаю повторно используемый компонент, где я могу редактировать любой элемент на месте. Я пытаюсь заполнить формы по умолчанию, но, потратив 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.

EDIT:

Контрольный код моей формы: 

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

1 Ответ

0 голосов
/ 05 ноября 2018

Чтобы выбрать значение по умолчанию, вам нужно дать вашему элементу управления желаемое значение.

Вот стеблиц, чтобы показать вам, что: 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>
...