Реактивные формы Angular Material, обновление опций mat-select на основе других select - PullRequest
Новая
       24

Реактивные формы Angular Material, обновление опций mat-select на основе других select

0 голосов
/ 18 октября 2018

В настоящее время я создаю панель мониторинга в Angular 6, Material 2. (версии перечислены ниже) 

    "dependencies": {
    "@angular/animations": "^6.1.9",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.9",
    "@angular/compiler": "^6.1.9",
    "@angular/core": "^6.1.9",
    "@angular/forms": "^6.1.9",
    "@angular/http": "^6.1.9",
    "@angular/material": "^6.4.7",
    "@angular/material-moment-adapter": "^6.4.7",
    "@angular/platform-browser": "^6.1.9",
    "@angular/platform-browser-dynamic": "^6.1.9",
    "@angular/router": "^6.1.9",
    "@types/chart.js": "^2.7.37",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.4",
    "moment": "^2.22.2",
    "rxjs": "^6.3.3",
    "zone.js": "~0.8.26"
  }

Я создал форму, в которой пользователь может выбирать данные для включения в отчет, который будетгенерироваться.

Я все связал контроль, используя реактивные формы.Проблема заключается в двух элементах mat-select, параметры второго элемента зависят от значения первого выбора.

Т.е.

Если select1.value === a, тогда select2 будет иметь опции a_1, a_2 и т. Д.

Если select1.value === b, тогда select2 будет иметьпараметры b_1, b_2 и т. д. и т. д.

Значения select2 связаны в шаблоне HTML с помощью 

<mat-option *ngFor="let item of dataSourceSelect.value?.units" [value]="item">{{item.toHTMLString()}}</mat-option>

При изменении значения select1через интерфейс все работает как положено.У меня возникает проблема, когда я обновляю значение mat-select с помощью функции FormControl.setValue(obj).Я могу обновить выбранное значение select1 просто отлично, но значение select2 не будет установлено, параметры не будут загружаться на основе значения select1.

После поиска похожих случаевЯ подозревал, что причиной является компаратор выбора циновки, но после передачи исходного объекта в .setValue() или переопределения функции compareWith в mat-select он все равно не работает, поэтому мне интересно, если кто-нибудьможет помочь мне здесь.

Я включил минимальный код воспроизведения в Stackblitz

в stackblitz: измените значение первого выбора, вы увидите, чтопараметры второго выбора изменятся, затем нажмите кнопку, которая использует FormControl.setValue(obj) для установки значения первого выбора, затем второй выбор вообще не будет иметь никаких опций.

1 Ответ

0 голосов
/ 18 октября 2018

По-моему, я использую valueChanges свойство элемента управления dataSourceControl и работаю как положено

компонент 

  ngOnInit() {
    this.reportForm = this.formBuilder.group({
      dataSourceControl: ['', Validators.required],
      dataUnitControl: ['', Validators.required]
    });

    this.reportForm.get('dataSourceControl').valueChanges.subscribe(item => {
      this.units = item.units
    })

template 

<mat-form-field>
  <label for="dataUnitSelect">Data unit: </label>
  <mat-select formControlName="dataUnitControl" required>
    <mat-option *ngFor="let item of units" [value]="item">{{item.toHTMLString()}}</mat-option>
  </mat-select>
  <mat-error *ngIf="reportForm.controls['dataUnitControl'].hasError('required')">Please choose a unit</mat-error>
</mat-form-field>

демонстрация stackblitz

valueChages метод возвращает наблюдаемое, которое испускает последние значения.Поэтому вы можете подписаться на valueChanges для обновления переменных экземпляра или выполнения операций.

...