Как привязать реактивную форму к md-select?

Question

У меня есть простая реактивная форма:

this.filterForm = this.fb.group({
      'type': ['', [Validators.required]]
});

И угловой материал элемента:

<form [formGroup]="filterForm">
   <md-select formControlName="type"></md-select>
</form>

Когда я подписывался на изменения:

this.filterForm.valueChanges.subscribe(val => {
        console.log(val);
    });

Не работает для материала, что я не так делаю?

Я пробовал также это:

[formControlName]="type"

Answer 1

Попробуйте переместить все в ngOnInit вместо constructor и ngOnChanges.

Причины: constructor с должны быть максимально легкими. И ngOnChanges запускается при изменении свойства @Input, а не при изменении значения form

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
})
export class SelectValueBindingExample {
  filterForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.filterForm = this.fb.group({
      'type': ['', [Validators.required]]
    });

    // To change if anything in the form changed.    
    this.filterForm.valueChanges.subscribe(val => {
      console.log(val);
    });

    // To change if just type in the form changed.
    this.filterForm.get('type').valueChanges.subscribe(val => {
      console.log(val);
    });
  }
}

Вот Образец StackBlitz для вашей ссылки.

Хотя я использую одну из более поздних версий Angular Material, это все равно должно работать.