如何禁用输入框角2材质？答案

【问题标题】：How to disable input box angular 2 material?如何禁用输入框角2材质？
【发布时间】：2019-02-13 21:31:06
【问题描述】：

请先阅读我的说明

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

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

这里有一个解决方案。

像这样改变方法。

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

我已经用你的 stackblitz 检查了这段代码。它正在工作。

更新：-

这是一个检查您的状况的示例，

HTML:-

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

打字稿

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

【讨论】：

很多答案，但你发布了我真正想要的答案谢谢先生！
很高兴为您提供帮助.. 谢谢。

【解决方案2】：

请在下面尝试：

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

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

【讨论】：

【解决方案3】：

试试这个：

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>

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

谢谢您，先生，您的代码按我的意愿工作，但是当我点击输入框时输入框被禁用

【解决方案4】：

首先通过设置twoDisabled = false 启用两个输入。当用户在第一个输入中添加值时，然后更改 twoDisabled = true。

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


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

您可以为第二个输入考虑相同的逻辑，但这也取决于不同的情况。比如：两者都有值，只有第二个输入有值...

【讨论】：