时间戳

首页 > 解决方案 > 如何使用angular2一键禁用按钮

javascript - 如何使用angular2一键禁用按钮

问题描述

我有一个发送按钮，其中包含 2 个 Api。因此，如果输入框为空，则发送按钮被禁用。现在我想让 1 个条件起作用，在提供电子邮件 ID 并单击保存按钮后，它必须在单击后被禁用。如果我在输入框上再次编辑，则必须启用它或必须处于禁用状态。

标签： javascriptangulartypescript

解决方案

如果您正在使用 响应式表单，请查看此stackblitz。

组件.ts

import { Component } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public form: FormGroup;
  public isThePreviousEmail: boolean;

  private previousEmail: string;

  constructor(private fb: FormBuilder) {
    this.isThePreviousEmail = true;
    this.buildForm();
    this.form.valueChanges.subscribe((value) => {
      if (this.previousEmail) {
        this.isThePreviousEmail = value !== this.previousEmail;
      }
    });
  }

  public onSubmit(): void {
    this.previousEmail = this.form.value.email;
    this.isThePreviousEmail = false;
  }

  private buildForm(): void {
    this.form = this.fb.group({
      email: [null, Validators.compose([Validators.required, Validators.email])]
    });
  }
}

组件.html

<form [formGroup]="form" (submit)="onSubmit()">
    Email: <input formControlName="email">

    <button type="submit" [disabled]="form.get('email').invalid || !isThePreviousEmail">Submit</button>
</form>.

我正在使用响应式表单验证来禁用提交按钮。当用户编辑输入字段时，布尔变量变为假。

[disabled]="form.get('email').invalid || !isThePreviousEmail"

我正在订阅形成这样的价值变化。

this.form.valueChanges.subscribe((value) => {
          if (this.previousEmail) {
            this.isThePreviousEmail = value !== this.previousEmail;
          }
});

在onSubmit方法上，我将值设置为 previousEmail 并将其isThePreviousEmail设为 false。

public onSubmit(): void {
    this.previousEmail = this.form.value.email;
    this.isThePreviousEmail = false;
  }

这可能会帮助你采取一个想法。

推荐阅读