如何禁用/启用下拉角4

Question

如何根据选择的另一个下拉菜单启用/禁用下拉菜单？

我试过了，但它似乎不起作用：

<select class="custom-select" id="abc">
    <option value="" hidden>Select</option>
    <option *ngFor="let data of datay" 
            [ngValue]="data.code" 
            [attr.disabled]="true"> 
        {{data.name}}
    </option>
</select>

欢迎提供任何示例代码。

Answer 1

我们可以通过使用 2-way 数据绑定来做到这一点。首先，我们将第一个<select> 元素绑定到data1。这将包含第一个元素中所选选项的值data.code。

假设如果用户选择data.code 值为“1”的选项，我们将禁用第二个<select> 元素。

然后，在我们的第二个<select> 元素上，我们将disabled 属性绑定到条件，这样disabled 的授权在data1 === '1' 时为真。

<select class="custom-select" [(ngModel)]="data1" id="dropdown1">
  <option value="" hidden>Select</option>
  <option *ngFor="let data of datay" [ngValue]="data.code"> 
    {{data.name}} 
  </option>
</select>

<select class="custom-select" [(ngModel)]="data2" [disabled]="data1==='1'">
  <option value="" hidden>Select</option>
  <option *ngFor="let data of datay2" [ngValue]="data.code"> 
    {{data.name}} 
  </option>
</select>

Answer 2

这里是响应式表单的示例，因为模板驱动表单的答案已经发布：

<form [formGroup]="form">
  <select name="field1" formControlName="field1">
    <option *ngFor="let value of [1, 2, 3]" [value]="value">{{value}}</option>
  </select>
</form>

<form [formGroup]="form">
  <select name="field1" formControlName="field2">
    <option *ngFor="let value of [1, 2, 3]" [value]="value">{{value}}</option>
  </select>
</form>

TS：

  form;

  ngOnInit(): void {
    this.form = new FormGroup({
      field1: new FormControl(),
      field2: new FormControl()
    });

    this.form.controls.field1.valueChanges.subscribe(value => {
      value === '2' ? this.form.controls.field2.disable() : this.form.controls.field2.enable();
    });
  }

Answer 3

试试这个：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  selectedFruit = null;
  fruits = [
    { name: 'Apple', code: 'Apple' },
    { name: 'Mango', code: 'Mango' },
    { name: 'Orange', code: 'Orange' },
    { name: 'Grapes', code: 'Grapes' },
    { name: 'Peach', code: 'Peach' },
  ];

  models = [
    { name: 'iPhone XS Max', code: 'iPhone XS Max' },
    { name: 'iPhone XS', code: 'iPhone XS' },
    { name: 'iPhone X', code: 'iPhone X' },
    { name: 'iPhone 8 Plus', code: 'iPhone 8 Plus' },
    { name: 'iPhone 8', code: 'iPhone 8' },
  ]
}

在你的模板中：

<h2>Fruits</h2>
<select class="custom-select" id="abc" [(ngModel)]="selectedFruit">
  <option value="null" hidden>Select</option>
  <option *ngFor="let fruit of fruits" [ngValue]="fruit.code"> {{fruit.name}}</option>
</select>

<h2>Phone Models</h2>
<select class="custom-select" id="abc" [disabled]="selectedFruit !== 'Apple'">
  <option value="" hidden>Select</option>
  <option *ngFor="let model of models" [ngValue]="model.code"> {{model.name}}</option>
</select>

---

这里有一个Working Sample StackBlitz 供您参考。

Answer 4

这取决于下拉菜单是否连接到 FormGroup。

如果是，只需使用 formGroup.get('yourPath').disable({onlySelf: true}); 禁用 FormControl

如果没有，您也可以在<select> 属性上使用[disabled]="isFieldDisabled" 属性。

如果您在 DropDownField 中使用 FormGroup，但选择通过 [disabled]="..." 禁用 DropDownField，那么您将在控制台中看到很多黄色文本。