angular - Toggle select menu options based on another fields value in FormGroup

Question

I am trying to toggle between 2 sets of options given, another select menu's value. I am struggling with a way to do this. I currently have:

Project Type:

<div class="form-group col-md-6">
        <label>Project Type</label>
        <select
          class="form-control"
          formControlName="projectType"
        >
          <option value=""></option>
          <option
            *ngFor="let type of ['Team Supplementation', 'Project']"
            [ngValue]="type"
          >
            {{ type }}
          </option>
        </select>
</div>

Project Phase:

<div class="form-group col-md-6">
        <label>Project Phase</label>
        <select
          class="form-control"
          formControlName="projectPhase"
          [ngClass]="{
            'is-invalid':
              projectForm.get('projectPhase').errors &&
              projectForm.get('projectPhase').touched
          }"
        >
          <option value=""></option>
          <option
            *ngFor="
              let phase of getPhases()
            "
            [ngValue]="phase"
          >
            {{ phase }}
          </option>
        </select>
</div>

I need the options of projectPhase to change when the value of projectType is selected. I have two array of strings for each projectType. What should I do to allow this to happen?

Answer 1

Assuming you are using a FormGroup to hold your reactive form, you can listen to the changes in the projectType and depending on the selected value you populate the list of projectPhases

in your ts file define a public property to hold the phasesOptionsList

public phasesOptions: any[];

and after initialising the formGroup you can add:

this.formGroup.get('projectType').valueChanges.subscribe((newValue) => {
      if (newValue === 'Team Supplementation') {
        this.phasesOptions = phasesList1;
      }else if (newValue === 'Project') {
        this.phasesOptions = phasesList2;
      }
    })

then in your html you always bind to the phasesOptions property

<div class="form-group col-md-6">
    <label>Project Phase</label>
    <select
      class="form-control"
      formControlName="projectPhase"
      [ngClass]="{
        'is-invalid':
          projectForm.get('projectPhase').errors &&
          projectForm.get('projectPhase').touched
      }"
    >
      <option value=""></option>
      <option
        *ngFor="
          let phase of phasesOptions
        "
        [ngValue]="phase"
      >
        {{ phase }}
      </option>
    </select>
</div>