I would like to be able to have four dropdown menus that behave as follows:

1. If the current dropdown gets selected, the dropdown next will be enabled.
2. If the current dropdown gets unselected every consecutive dropdown gets disabled

Right now I'm able to enable the next dropdown upon selecting the current dropdown, as well as disable the previous dropdown if the current dropdown gets unselected. But I would like to be able to disable all consecutive dropdowns.

Visual explanation

cohort-selection.componet.ts

 //Formgroup to validate and grab values from dropdown menu form
  dropDownMenu = new FormGroup({
    studentType: new FormControl(''),
    yearTerm: new FormControl(''),
    academicLabel: new FormControl(''),
    academicType: new FormControl(''),
  });

  constructor(private router: Router, private chartsService: ChartsService) {
    this.studentTypeItems = [{ label: 'Freshmen' }, { label: 'Transfer' }];
    this.yearTermItems = [{ label: 'Fall 15' }, { label: 'Spring 16' }, { label: 'Fall 16' }, { label: 'Spring 17' }, { label: 'Fall 17' }];
    this.academicLabelItems = [{ label: 'Cohort Department' }];
    this.academicTypeItems = [{ label: 'Biomedical Engineering' }, { label: 'Civil Engineering' }, { label: 'Electrical Engineering'}, { label: 'Mechancial Engineering' }, { label: 'Comp Engineering&Comp Science' }];
  } 

cohort-selection.componet.html

<form [formGroup]="dropDownMenu" (ngSubmit)="submit()">
  <div >
    <div >
      <app-reusable-dropdown
        [disabled]="false"
        [options]="studentTypeItems"
        placeholder="Student Type"
        formControlName="studentType"
      ></app-reusable-dropdown>
    </div>
  </div>
  <div >
    <div >
      <app-reusable-dropdown
        [disabled]="!this.dropDownMenu.controls['studentType'].value"
        [options]="yearTermItems"
        placeholder="Year Term"
        formControlName="yearTerm"
      ></app-reusable-dropdown>
    </div>
  </div>
  <div >
    <div >
      <app-reusable-dropdown
        [disabled]="!this.dropDownMenu.controls['yearTerm'].value"
        [options]="academicLabelItems"
        placeholder="Academic Label"
        formControlName="academicLabel"
      ></app-reusable-dropdown>
    </div>
  </div>
  <div >
    <div >
      <app-reusable-dropdown
        [disabled]="!this.dropDownMenu.controls['academicLabel'].value"
        [options]="academicTypeItems"
        placeholder="Academic Type"
        formControlName="academicType"
      ></app-reusable-dropdown>
    </div>
  </div>

  <button
    (click)="nextPage()"
    [disabled]="!this.dropDownMenu.controls['academicType'].value"
    pButton
    pRipple
    type="button"
    label="Get charts"
    icon="pi pi-angle-right"
    iconPos="right"
  ></button>
</form>

CodePudding user response：

A hackish way without seeing your app-reusable-dropdown is that your [disabled] can chain multiple in each if:

<form [formGroup]="dropDownMenu" (ngSubmit)="submit()">
  <div >
    <div >
      <app-reusable-dropdown
        [disabled]="false"
        [options]="studentTypeItems"
        placeholder="Student Type"
        formControlName="studentType"
      ></app-reusable-dropdown>
    </div>
  </div>
  <div >
    <div >
      <app-reusable-dropdown
        [disabled]="!this.dropDownMenu.controls['studentType'].value"
        [options]="yearTermItems"
        placeholder="Year Term"
        formControlName="yearTerm"
      ></app-reusable-dropdown>
    </div>
  </div>
  <div >
    <div >
      <app-reusable-dropdown
        [disabled]="!this.dropDownMenu.controls['studentType'].value 
           || !this.dropDownMenu.controls['yearTerm'].value"
        [options]="academicLabelItems"
        placeholder="Academic Label"
        formControlName="academicLabel"
      ></app-reusable-dropdown>
    </div>
  </div>
  <div >
    <div >
      <app-reusable-dropdown
        [disabled]="!this.dropDownMenu.controls['studentType'].value 
           || !this.dropDownMenu.controls['yearTerm'].value 
           || !this.dropDownMenu.controls['academicLabel'].value"
        [options]="academicTypeItems"
        placeholder="Academic Type"
        formControlName="academicType"
      ></app-reusable-dropdown>
    </div>
  </div>

  <button
    (click)="nextPage()"
    [disabled]="!this.dropDownMenu.controls['academicType'].value"
    pButton
    pRipple
    type="button"
    label="Get charts"
    icon="pi pi-angle-right"
    iconPos="right"
  ></button>
</form>

If that's a little hard to maintain, you probably need to create variables for each dropdowns state and update them accordingly as the values change.