Угловой выбор материала (mat-select) - Как установить значение по умолчанию

Многие вопросы обсуждают способ установки значения по умолчанию для отображения в элементе управления «Выбор», здесь я раскрываю случай форм, управляемых шаблоном Angular 8, где я не могу получить значение по умолчанию, отображаемое в мат-выбор, когда кнопка щелкнут, даже если console.log показывает правильное значение:

<mat-select [formControl]="itemControl" required [(value)]="itemValue">
    <mat-option>--</mat-option>
    <mat-option *ngFor="let item of items" [value]="item">{{item}}</mat-option>
</mat-select>

Моя часть кода компонента выглядит следующим образом:

export class MyComponent {

  items: string[] = [''];
  itemControl = new FormControl('', [Validators.required]);
  itemValue: string = '';

  myButtonClick(): void {
        this.itemValue = this.getItems()[0];     <--- This returns the first element in a valid array
        console.log(this.itemValue);
      }
}

Так что я делаю неправильно?


typescript angular angular-material
person Sami-L    schedule 28.02.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Поскольку вы используете элемент управления формой, вы должны присвоить значение по умолчанию для itemControl, например

  this.itemControl.patchValue(this.getItems()[0])

Вы можете назначить его из хука жизненного цикла onInit или из ответа API. Таким образом, элемент управления формы может соответствующим образом обновить значение. Директива mat-select не поддерживает двустороннюю привязку данных для свойства value.

person Anto Antony    schedule 28.02.2020
comment
не могли бы вы ответить на это: stackoverflow.com/questions/60465057/ - person Sami-L; 29.02.2020

arrow_upward
0
arrow_downward

Пример:

HTML:

 <form [formGroup]="entregaSelecao">
       <mat-form-field class="form-input">
           <mat-label>Bairro</mat-label>
           <mat-select disableRipple formControlName="bairro">
              <mat-option  *ngFor="let item of bairros" [value]="item">{{item}}</mat-option>
           </mat-select>
       </mat-form-field>
   </form>

.ts:

public enderecoForm: FormGroup;

bairros: string[] = ['bairro 1', 'bairro 2', 'bairro 3'];
ngOnInit() {
    this.entregaSelecao = this.formBuilder.group({
          entregaSelecionado: ['', Validators.required]
    });
}
person klebers    schedule 28.02.2020