如何在Angular中禁用无效表单或点击的按钮？

在这篇博文中，你将学习Angular Button禁用表单无效的方法。

• 表单无效的表单验证
• 点击提交后

首先使用angular cli创建一个应用程序，这篇文章不包括从头开始创建应用程序。

在任何应用程序中，你有一个用户表单，其中包含输入字段和提交按钮。输入字段有验证，如required 或email 或custom validation 我们有一个提交按钮，最初是禁用的，一旦表单验证有效，按钮应该可以点击。

这个例子中，它做了以下事情

• 当表单验证通过时，提交按钮被启用
• 如果表单包含验证错误，则提交按钮失效。

禁用表单无效验证的按钮示例

在Angular中，我们使用以下两种方法进行表单处理验证

• 模板驱动的表单
• 反应式表单

FormModule 是Angular模板驱动的表单验证所需要的 需要导入到反应式表单验证的应用程序中。ReactiveFormsModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule,ReactiveFormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

按钮禁用模板驱动表单无效

Formsmodule 已经按照上面的步骤导入，这使得我们可以在应用程序中使用所有的模板驱动功能。 使用angular cli命令创建一个组件

为表单元素定义模板表单变量 在我们的例子中，myForm变量被声明并更新到表单标签中，语法如下

<form #myForm="ngForm">

W 声明用于从组件到模型的双向绑定，也给出了控制，如无效或价值改变

Inn按钮，如果输入是空的，myForm.invalid返回真，禁用变为真。

你也可以用!"myForm.valid "来代替myForm.invalid。

 <form #myForm="ngForm">
  <div class="form-group">
    <label>Name</label>
    <input [(ngModel)]="name" #nameInput="ngModel" name="name" type="text"  required>
    <button [disabled]="myForm.invalid">Submit</button>
  </div>
</form>

按钮禁用反应式驱动的表单无效

在typescript组件中，reactiveForm变量被声明为FormGroup ，它被初始化为空值，验证器被配置为所需类型。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  reactiveForm: FormGroup;

  constructor(private builder: FormBuilder) {
  }

  ngOnInit() {
  this.reactiveForm = this.builder.group({
    age: [null, Validators.required]
  });
  }
}

在模板HTML组件中。

表单标签被更新为formGroup变量名称 - reactiveForm

而输入被添加到带有字段名的formControlName。

这将给出双向绑定和表单有效和无效的属性。

<h3>Submit button disable example Reactive Form</h3>
<form [formGroup]="reactiveForm">
      <input placeholder="Enter your Age" formControlName="age"/>
  <button type="submit" [disabled]="reactiveForm.invalid">Submit</button>
</form>
<br>
<div>reactiveForm.valid= {{ reactiveForm.valid }}</div>
<div>reactiveForm.invalid = {{ reactiveForm.invalid }}</div>
<div>reactiveForm.status = {{ reactiveForm.status }}</div>
<div>reactiveForm.disabled = {{ reactiveForm.disabled }}</div>

而输出是

不能绑定到'formGroup'，因为它不是'form'的一个已知属性，错误

这个错误是formGroup无法在你的组件中找到相应的模块。

修复方法是，请在你的app.module.ts中导入FormsModule,ReactiveFormsModule 。