как включить / отключить выпадающий список после выбора радиокнопки? - PullRequest
Новая
       25

как включить / отключить выпадающий список после выбора радиокнопки?

0 голосов
/ 03 декабря 2018

Данные JSON: 

radio1Data: any[] = [
    { value: 'col-1', viewValue: 'Col-1' },
    { value: 'col-2', viewValue: 'Col-2' }

  ];
  radio2Data: any[] = [
    { value: 'col-1', viewValue: 'Col-1' },
    { value: 'col-2', viewValue: 'Col-2' }

  ];
  radio2Value: any[] = [
    { value: 'col-1', viewValue: '(10)' },
    { value: 'col-2', viewValue: '(4)' },
    { value: 'col-1', viewValue: 'Custom' }
  ];

HTML: 

<div class="window-pad-height">
  <div class="row">
  </div>
  <mat-radio-group>
    <div class="row">
      <div class="col-md-2">
        <mat-radio-button value="1">radio1
        </mat-radio-button>
      </div>
      <div class="col-md-2">
        <mat-form-field>
          <mat-select placeholder="Select ">
            <mat-option *ngFor="let radio1 of radio1Data" [value]="radio1.value">
              {{radio1.viewValue}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2">
        <mat-radio-button value="2">radio2
        </mat-radio-button>
      </div>
      <div class="col-md-2">
        <mat-form-field>
          <mat-select placeholder="Select ">
            <mat-option *ngFor="let radio2 of radio2Data" [value]="radio2.value">
              {{radio2.viewValue}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div class="col-md-2">
        <mat-form-field>
          <mat-select placeholder="value">
            <mat-option *ngFor="let value of radio2value" [value]="radio2value.value">
              {{radio2value.viewValue}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
  </mat-radio-group>
</div>

, когда я выбираю переключатель 1, тогда должен быть активирован раскрывающийся список радио 1, а когда я выбираю переключатель 2, затем радио2 выпадающих списка должны получить разрешение, и когда я выбираю radio2Data, то radio2value должно получить разрешение, и в раскрывающемся списке есть пользовательский ввод, если я выбираю пользовательский, то пользовательский ввод должен быть введен конечным пользователем!как сделать?

Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 03 декабря 2018 
<mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
  <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
    <label>{{season}}<input [disabled]="season !== favoriteSeason"></label>
  </mat-radio-button>
</mat-radio-group>

Вы можете использовать ngmodel в группе радиостанций.Затем вы даете кнопке ecery значение [value], которое позже будет присвоено вашей переменной ngmodel.С помощью [отключено] вы можете отключить выбор коврика (например, здесь мой ввод).

Короче говоря, вы нажимаете кнопку.значение теперь выбрано ngmodel (любимое время года здесь).Теперь значение === любимое время года, означающее отключение, теперь равно false

0 голосов
/ 03 декабря 2018

Вы можете использовать атрибут disabled выбора материала, чтобы отключить опцию выбора:

Пример StackBlitz

Изменения в коде HTML: 

<div class="window-pad-height">
    <div class="row"></div>
    <mat-radio-group>
        <div class="row">
            <div class="col-md-2">
                <mat-radio-button value="1" (click)="onClick(1)">radio1</mat-radio-button>
            </div>
            <div class="col-md-2">
                <mat-form-field>
                    <mat-select placeholder="Select " [disabled]="isDisabled">
                        <mat-option *ngFor="let radio1 of radio1Data" [value]="radio1.value">
                            {{radio1.viewValue}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <mat-radio-button value="2" (click)="onClick(2)">radio2</mat-radio-button>
            </div>
            <div class="col-md-2">
                <mat-form-field>
                    <mat-select placeholder="Select " [disabled]="isDisabled1">
                        <mat-option *ngFor="let radio2 of radio2Data" [value]="radio2.value">
                            {{radio2.viewValue}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

        </div>
    </mat-radio-group>
</div>

В TS: 

isDisabled: boolean = false;
isDisabled1: boolean = false;
onClick(rbNo) {
   f (rbNo == 1) {
      this.isDisabled = false;
      this.isDisabled1 = true;
   }
   else {
      this.isDisabled = true;
      this.isDisabled1 = false;
    }
}
0 голосов
/ 03 декабря 2018

Попробуйте установить атрибут [disabled] в элементах управления select, который принимает логическое значение.

Измените это в соответствии с выбранным значением переключателя.

...