如何在 Angular 中禁用响应式表单提交按钮 - Javascript

当使用 Angular 中的响应式表单时，我们可能需要在表单验证失败时禁用提交按钮。下面是在 Angular 中禁用响应式表单提交按钮的方法。

HTML

首先，在 HTML 中创建一个表单，并添加一个按钮。我们将使用 Angular 的表单指令来处理表单，并利用 Angular 的模板语法来绑定按钮的 disabled 属性。

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <!-- 表单内容 -->
  
  <button type="submit" [disabled]="!myForm.valid">提交</button>
</form>

上面的表单绑定了一个 FormGroup 对象，以及一个 ngSubmit 事件，用来调用 onSubmit() 方法。当表单中的输入项有效时，提交按钮会启用，否则会禁用。

Typescript

接下来，在 Typescript 中实现表单的逻辑。我们需要使用 Angular 的 FormBuilder 类来创建表单。然后我们可以通过绑定 onSubmit() 方法到 ngSubmit 事件上，来处理表单的提交。

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

@Component({
  selector: 'my-form',
  templateUrl: './my-form.component.html'
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      // 表单输入项
    });
  }

  onSubmit() {
    // 处理表单提交
  }
}

我们使用 FormBuilder 来创建一个新的 FormGroup 对象，在这个对象中包含我们需要的表单输入项。然后我们实现 onSubmit() 方法，在这个方法中处理表单的提交逻辑。

以上就是如何在 Angular 中禁用响应式表单提交按钮的方法。当表单中的输入项无效时，提交按钮会被禁用，有效时会启用。