Как включить текстовое поле ввода после выбора пользовательской опции из выпадающего меню? - PullRequest
Новая
       3

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

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

JSON DATA 

 loginValue: any[] = [
    { value: 'col-1', viewValue: 'facebook' },
    { value: 'col-2', viewValue: 'google' },
    { value: 'col-1', viewValue: 'Custom' }
  ];

HTML

<mat-form-field>
                    <mat-select placeholder="login Value" [disabled]="isDisabled1">
                      <mat-option *ngFor="let loginvalue of loginValue" [value]="loginvalue.value">
                        {{loginvalue.viewValue}}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>

                  <div class="col-md-2">
                  <mat-form-field class="Custom">
                    <input matInput placeholder="Enter Custom Value" [disabled]="isDisabled1">
                  </mat-form-field>

У меня есть три значения в раскрывающемся списке facebook / google / Custom Когда я выбираю facebook и Google, ввод текстового поля должен быть отключен, а когда я нажимаю на Custom, вводвключить текстовое поле, как писать логику в машинописи, или все можно сделать только в HTML?Заранее спасибо!

Ответы [ 2 ]

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

Вы можете попробовать использовать реактивные формы, подписавшись на выбранную вами опцию и управляя включением / отключением вашего элемента управления вводом.

TS: 

changeState() {
    this.form.get('logintype').valueChanges
      .subscribe(res => {
        if (res === "Custom") { this.form.get('customInput').enable() }
        else { this.form.get('customInput').disable() }
      });
  }

HTML: 

<form [formGroup]="form">
    <mat-form-field>
        <mat-select formControlName="logintype" placeholder="Select an option" (selectionChange)="changeState()">
            <mat-option *ngFor="let option of loginValue" [value]="option.viewValue">
                {{ option.viewValue }}
            </mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <input matInput formControlName="customInput" type="text">
  </mat-form-field>

</form>

Вот пример кода на StackBlitz

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

Вам нужно привязать модель к переменной: [(ngModel)]="selectedValue" и использовать это в отключенном атрибуте.а затем проверьте отключенный атрибут следующим образом 

  [disabled]="selectedValue.viewValue!=='Custom'"

Обратите внимание: [value]="loginvalue"

Проверьте примеры здесь вы найдете пример ngmodel

Здеськод, который я изменил. 

<mat-form-field>
    <mat-select placeholder="login Value" [(ngModel)]="selectedValue" [disabled]="isDisabled1">
        <mat-option *ngFor="let loginvalue of loginValue" [value]="loginvalue">
            {{loginvalue.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

<div class="col-md-2">
    <mat-form-field class="Custom">
        <input matInput placeholder="Enter Custom Value" [disabled]="selectedValue.viewValue!=='Custom'">
                  </mat-form-field>
  </div>

Демонстрация Stackblitz

...