Angular - Опция Mat выбранных значений не работает - PullRequest
Новая
       13

Angular - Опция Mat выбранных значений не работает

1 голос
/ 30 апреля 2020

У нас есть два поля формы, и нам нужно отключить или включить второе поле на основе выбранного значения из первого поля. В первом поле у ​​нас есть 5 значений, таких как «a», «b», «c», «d», «e». Пользователь может выбрать все или ни одного из этих 5 значений.

Если пользователь выберет «C», нам нужно включить второе поле формы, в противном случае оно должно быть отключено.

Может кто-нибудь, пожалуйста, помогите мне написать эту логи c. 

                   <mat-form-field>
                        <mat-label>Technology Options<mat-icon class="required">star_rate</mat-icon></mat-label>
                        <mat-select multiple formControlName="TechnologyTypeId" [value]="mResponse.TechnologyTypeId">
                            <mat-option *ngFor="let item of TechnologyTypes"
                                        [value]="item.TechnologyTypeId" 
                                        (selectionChange)="onSelection($event)">
                                {{ item.OutputText }}
                            </mat-option>
                        </mat-select>
                   </mat-form-field>

                    <mat-form-field>
                        <mat-label>Language Types<mat-icon class="required">star_rate</mat-icon></mat-label>
                        <mat-select multiple formControlName="LanguageTypeId">
                            <mat-option *ngFor="let item of LanguageTypes"
                                        [value]="item.LanguageId">
                                {{ item.LanguageText }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>

1 Ответ

2 голосов
/ 30 апреля 2020

В вашем машинописном коде (предположим, что ваша группа форм называется _form: 

import {Subject} form 'rxjs';
import {takeUntil} form 'rxjs/operators';
...

_form: FormGroup;

// best practice: unsubscribe from all your observables when the component is destroyed
private _destroy$ = new Subject<void>();

...

constructor(private _fb: FormBuilder) {
  this._form = this._fb.group({
    ...
    TechnologyTypeId: null,
    LanguageTypeId: {value: null, disabled: true}
    ...
  })
}

ngAfterViewInit() {
  this._form.get('TechnologyTypeId').valueChanges
   .pipe(takeUntil(this._destroy$))
   .subscribe((value: string) => {
     if(value === '3rd value') {
       this._form.get('LanguageTypeId').enable();
     } else {
       this._form.get('LanguageTypeId').disable();
     }
   });
}

ngOnDestroy() {
  // best practice: unsubscribe from all your observables when the component is destroyed 
  if(this._destroy$ && !this._destroy$.closed) {
    this._destroy$.next();
    this._destroy$.complete();
  }
}
...