Angular + Material, цикл по вложенному списку в зависимости от прошлого выбора

Question

Создаю простую форму регистрации, пользователь вводит почту, пароль, выбирает направление: Backend, Fronend, Аналитика и тд (всё что придёт с бэка). В зависимости от выбранного направления может выбрать язык программирования (если он есть).

JSON который я планирую получать имеет вид:

{
  "Backend": [
    "Java",
    "C#"
  ],
  "Frontend": [
    "JavaScript"
  ],
  "Аналитик": null
}

Как мне циклом пройтись по второму массиву, после выбора одного из направлений (если у направления есть язык программирования), а если нет, то оставить поле неактивным? И как привязать выбранные пункты к FormControl?

Сейчас код выглядит так (вторая часть не работает):

<mat-form-field color="accent">
      <mat-label>Ваша специальность</mat-label>
      <mat-select formControlName="specialization">
        <mat-option id="spec{{spec}}" *ngFor="let spec of specializations" [value]="spec.id">{{spec.spec}}</mat-option>
      </mat-select>
      <mat-error *ngIf="registrationForm.controls['specialization'].hasError('required')">Это обязательное поле
      </mat-error>
    </mat-form-field>
<mat-form-field color="accent">
      <mat-label>Ваш язык программирования</mat-label>
      <mat-select [disabled]="registrationForm.controls['specialization'].value === null">
        <mat-option>123</mat-option>
      </mat-select>
    </mat-form-field>

Answer 1

Думаю логика должна быть такой:

1 выбрать направление, например, при клике

<mat-option id="spec{{spec}}" *ngFor="let spec of specializations" [value]="spec.id" (click)="directionHandler(spec.spec)">{{spec.spec}}</mat-option>

2 записать currentDirection текущее направление

// предположим у вас direction это объект с АПИ
public directions = {
  "Backend": [
    "Java",
    "C#"
  ],
  "Frontend": [
    "JavaScript"
  ],
  "Аналитик": null
};

public currentDirection: string[];
...

//предположим spec это Backend|Frontend строка
public directionHandler(spec:string) {
  this.currentDirection = this.directions[spec];
}

После того как currentDirection сформирован выводить массив языков

<mat-form-field color="accent">
      <mat-label>Ваш язык программирования</mat-label>
      <mat-select *ngFor="let lang of currentDirection">
        <mat-option (click)="langHandler(lang)">{{lang}}</mat-option>
      </mat-select>
    </mat-form-field>

БЛОГ НА HUSL

Angular + Material, цикл по вложенному списку в зависимости от прошлого выбора

Ответы (1 шт):