如果当前被选中，我如何启用下一个下拉选择，而当上一个被取消选择时，如何再次禁用？

Question

我希望能够有四个行为如下的下拉菜单：

如果当前下拉菜单被选中，下一个下拉菜单将被启用。
如果取消选择当前下拉菜单，则每个连续的下拉菜单都会被禁用

现在，我可以在选择当前下拉菜单时启用下一个下拉菜单，如果未选择当前下拉菜单，则可以禁用上一个下拉菜单。但我希望能够禁用所有连续的下拉菜单。

Visual explanation

队列-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' }];
  }

队列-selection.componet.html

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

Answer 1

没有看到你的 app-reusable-dropdown 的 hackish 方法是你的 [disabled] 可以在每个 if:

中链接多个

<form [formGroup]="dropDownMenu" (ngSubmit)="submit()">
  <div class="field grid">
    <div class="col">
      <app-reusable-dropdown
        [disabled]="false"
        [options]="studentTypeItems"
        placeholder="Student Type"
        formControlName="studentType"
      ></app-reusable-dropdown>
    </div>
  </div>
  <div class="field grid">
    <div class="col">
      <app-reusable-dropdown
        [disabled]="!this.dropDownMenu.controls['studentType'].value"
        [options]="yearTermItems"
        placeholder="Year Term"
        formControlName="yearTerm"
      ></app-reusable-dropdown>
    </div>
  </div>
  <div class="field grid">
    <div class="col">
      <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 class="field grid">
    <div class="col">
      <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>

如果这有点难以维护，您可能需要为每个下拉状态创建变量并随着值的变化相应地更新它们。

如果当前被选中，我如何启用下一个下拉选择，而当上一个被取消选择时，如何再次禁用？

How can I enable next dropdown selection if current is selected and disable again when previous gets unselected?

angular

forms

primeng

reactive