angular 如何实现根据表单值的变化去改变按钮的disable属性?

Question

(之前在工作的项目中有遇到这个需求, 没找到对应的代码, 现在准备自己写个)

先上几张自己项目的截图来描述下需求..

最开始是这样子写的submitDisabled: boolean = this.user.username == '';想着能把数据绑定上去, 但是没效果..

以下是关键代码

login.component.html

<div id="login">
  <div class="box-wrapper d-flex align-items-center justify-content-center">
    <mat-card class="shadow p-4">
      <mat-card-content>
        <form class="form d-flex flex-column">
          <mat-form-field>
            <mat-label>{{ 'USER_NAME' | translate }}</mat-label>
            <input matInput type="text" [(ngModel)]="user.username" name="username" #username="ngModel">
            <mat-icon matSuffix>person</mat-icon>
          </mat-form-field>

          <mat-form-field>
            <mat-label>{{ 'USER_PASSWORD' | translate }}</mat-label>
            <input matInput type="password" [(ngModel)]="user.password" name="password" #password="ngModel">
            <mat-icon matSuffix>lock</mat-icon>
          </mat-form-field>
        </form>
        <button mat-raised-button color="primary" class="w-100" (click)="onSubmit()" [disabled]="submitDisabled">{{ 'SUBMIT' | translate }}</button>
      </mat-card-content>
    </mat-card>
  </div>
</div>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

import { User } from 'src/app/base/models/user.model';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  canSubmitted!: boolean;
  user = new User();
  submitDisabled: boolean = this.user.username === '';

  constructor(public translate: TranslateService) {
  }

  ngOnInit(): void {
  }

  onSubmit() {

  }

}

以前有看到过有个属性是当文本框值改变触发的事件, 但是在官网上没找到
https://angular.cn/guide/even...

Answer 1

目前找到的方法是使用(ngModelChange)事件绑定来实现
原理就是当每次改变文本框里的值时候去判断一下, 按钮是否应该被禁用

login.component.html

<div id="login">
  <div class="box-wrapper d-flex align-items-center justify-content-center">
    <mat-card class="shadow p-4">
      <mat-card-content>
        <form class="form d-flex flex-column">
          <mat-form-field>
            <mat-label>{{ 'USER_NAME' | translate }}</mat-label>
            <input matInput type="text" [(ngModel)]="user.username" name="username" #username="ngModel" (ngModelChange)="onInputChange()">
            <mat-icon matSuffix>person</mat-icon>
          </mat-form-field>

          <mat-form-field>
            <mat-label>{{ 'USER_PASSWORD' | translate }}</mat-label>
            <input matInput type="password" [(ngModel)]="user.password" name="password" #password="ngModel" (ngModelChange)="onInputChange()">
            <mat-icon matSuffix>lock</mat-icon>
          </mat-form-field>
        </form>
        <button mat-raised-button color="primary" class="w-100" (click)="onSubmit()" [disabled]="submitDisabled">{{ 'SUBMIT' | translate }}</button>
      </mat-card-content>
    </mat-card>
  </div>
</div>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

import { User } from 'src/app/base/models/user.model';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  canSubmitted!: boolean;
  user = new User();
  submitDisabled: boolean = true;

  constructor(public translate: TranslateService) {
  }

  ngOnInit(): void {
  }

  checkInput(value: any) {
    return value && value !== '';
  }

  onInputChange() {
    this.submitDisabled = !(this.checkInput(this.user.username) && this.checkInput(this.user.password));
  }

  onSubmit() {

  }

}