Как отключить поле ввода углового 2 материала?

Question

Пожалуйста, прочтите мое Описание Сначала

Файл HTML

<div class="row col-md-2">
   <mat-form-field appearance="outline" class="nameInput col-md-2">
      <mat-label>One</mat-label>
      <input
      matInput
      [(ngModel)]="One"
      (ngModelChange)="onChangeDisable()"
      />
   </mat-form-field>
</div>
<div class="row col-md-2">
   <mat-form-field
      appearance="outline"
      class="nameInput col-md-2"
      >
      <mat-label>Two</mat-label>
      <input
      matInput
      [(ngModel)]="Two"
      (ngModelChange)="onChangeDisable()"
      [disabled]="twoDisabled"
      />
   </mat-form-field>
</div>

Файл TS

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



/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
One:any;
Two:any;
twoDisabled=true;


    onChangeDisable() {
        if (this.One != null) {
            this.twoDisabled = false;
        }
    }
}

Есть два поля ввода с именами «Один» и «Два», при первом включении оба поля ввода должны быть включены, нокогда я ввожу любое значение в поле «Первый ввод», тогда второе поле ввода должно быть отключено, а когда я очищаю поля от первого ввода, тогда включается второе поле ввода, то же самое должно быть сделано со вторым полем ввода. КАК?

Моя ссылка на StackBlitz -> https://stackblitz.com/edit/mat-input12345677709-gfj1-gxqswz-u1tbuk

Answer 1

Попробуйте:

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

@Component({...})
export class TableBasicExample {
  one: any;
  two: any;
  currentlyDisabled: string;

  onChangeDisable() {
    if(this.one) {
      this.currentlyDisabled = 'two';
    } else if (this.two) {
      this.currentlyDisabled = 'one';
    } else {
      this.currentlyDisabled = '';
    }
  }

}

И в шаблоне:

<div class="row col-md-2">
   <mat-form-field appearance="outline" class="nameInput col-md-2">
      <mat-label>One</mat-label>
      <input
        matInput
        [(ngModel)]="one"
        (change)="onChangeDisable()"
        [disabled]="currentlyDisabled === 'one'"
      />
   </mat-form-field>
</div>
<div class="row col-md-2">
   <mat-form-field
      appearance="outline"
      class="nameInput col-md-2"
      >
      <mat-label>Two</mat-label>
      <input
        matInput
        [(ngModel)]="two"
        (change)="onChangeDisable()"
        [disabled]="currentlyDisabled === 'two'"
      />
   </mat-form-field>
</div>

---

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

Answer 2

Оба входа активируются, если сначала установить twoDisabled = false.И когда пользователь добавит значение в первый вход, тогда измените twoDisabled = true.

export class TableBasicExample {
  One: any;
  Two: any;
  twoDisabled = false;


  onChangeDisable() {
    if (!this.One) {
      this.twoDisabled = false;
    }
    else {
      this.twoDisabled = true;
    }
  }
}

Вы можете рассмотреть ту же логику для второго входа, но это также зависит от разных случаев.Как: оба имеют значения, только второй вход имеет значение ...

Answer 3

Пожалуйста, попробуйте ниже:

    export class TableBasicExample {
      One: any;
      Two: any;
      twoDisabled = false;

      onChangeDisable() {
        if (this.One) {
          this.twoDisabled = true;
        } else {
          this.twoDisabled = false;
        }
      }
    }

Answer 4

Вот решение для вас.

Просто измените метод следующим образом.

 onChangeDisable() {
       if(this.One!=null && this.One!=''){
         this.twoDisabled=true;
       }else{
         this.twoDisabled=false;
       }
    }

Я проверил этот код с вашим стеком. Это работает.

Обновление: -

Вот пример для проверки вашего состояния,

Html: -

  <input
      matInput
      [(ngModel)]="One"
      (ngModelChange)="onChangeDisable()"
      [disabled]="oneDisabled"
      />

Tyepescript

oneDisabled=false;
 onChangeDisable(isSecond) {
      if(!isSecond){
        if(this.One!=null && this.One!=''){
         this.twoDisabled=true;
       }else{
         this.twoDisabled=false;
       }
      }else{
         if(this.Two!=null && this.Two!=''){
         this.oneDisabled=true;
       }else{
         this.oneDisabled=false;
       }
      }

    }

вот стекаблицдля вас.

https://stackblitz.com/edit/mat-input12345677709-gfj1-gxqswz-u1tbuk-6w3qjh