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路数据绑定来做到这一点。首先，我们将第一个<select>元素绑定到data1。这将包含第一个元素中所选选项的值data.code。

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

然后，在我们的第二个<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

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

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

如何禁用/启用下拉角4

4 个答案: