как отключить / включить раскрывающийся угловой 4 - PullRequest
Новая
       24

как отключить / включить раскрывающийся угловой 4

0 голосов
/ 30 мая 2019

Как включить / отключить раскрывающийся список в зависимости от выбора другого раскрывающегося меню?

Я пробовал это, но, похоже, не работает: 

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

Любой пример кодаценится.

Ответы [ 3 ]

1 голос
/ 30 мая 2019

Вот пример с реагирующими формами, поскольку ответ с формами на основе шаблонов уже опубликован: 

<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();
    });
  }
1 голос
/ 30 мая 2019

Попробуйте: 

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>

Вот вам Рабочий образец StackBlitz для вашей ссылки.

1 голос
/ 30 мая 2019

Мы можем сделать это, используя двустороннюю привязку данных.Сначала мы связываем первый элемент <select> с data1.Он будет содержать значение data.code выбранного параметра из первого элемента.

Предположим, что мы отключим второй элемент <select>, если пользователь выберет параметр со значением data.code, равным '1.'.

Затем на втором элементе <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>
...