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

问题描述

请先阅读我的描述

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

标签： angulartypescriptangular-material

这是给你的解决方案。

像这样改变方法。

 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;
       }
      }

    }

这是给你的stackblitz。

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

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

问题描述

解决方案

推荐阅读