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

这是为您提供的解决方案。

只需更改这种方法即可。

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

我已经使用您的堆栈闪码检查了此代码。它正在工作。

更新：-

以下是检查您的状况的示例，

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

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

尝试一下：

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。

如何禁用输入框angular 2材质？

4 个答案: