如果選擇了當前，如何啟用下一個下拉選擇，并在未選擇上一個時再次禁用？

我希望能夠有四個下拉選單，其行為如下：

1. 如果選擇了當前下拉選單，則將啟用下一個下拉選單。
2. 如果當前下拉串列未被選中，則每個連續的下拉串列都被禁用

現在，我可以在選擇當前下拉選單時啟用下一個下拉選單，如果當前下拉選單未被選中，則可以禁用上一個下拉選單。但我希望能夠禁用所有連續的下拉選單。

視覺解釋

佇列選擇.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>

uj5u.com熱心網友回復：

在沒有看到您的應用程式可重用下拉串列的情況下，您的 [disabled] 可以在每個鏈接中鏈接多個，如果：

<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>

如果這有點難以維護，您可能需要為每個下拉狀態創建變數，并隨著值的變化相應地更新它們。

標籤：

上一篇：Jmeter-通過JavaScript發送帶有檔案的表單

下一篇：角度動態輸入填充相同的值