Angular7-表单

简介

Angular7是一个强大的JavaScript框架，它可以通过组件、服务和指令构建Web应用。表单是Web应用中不可或缺的一部分。Angular7提供了许多方便的工具来构建表单。

在Angular7中，表单是一种数据驱动的方式，用于收集和验证用户的输入数据。Angular7的表单特别适用于复杂的表单，对于开发人员而言，它能提供更好的可读性、可维护性。

模板驱动表单

Angular7中的模板驱动表单类似于HTML中的表单，通过使用指令，在HTML代码中添加表单控件，并使用[(ngModel)]指令将控件的值绑定到组件中的属性。将数据绑定到组件属性之后，开发人员就可以在组件中处理这些数据。

示例

以下代码片段演示了一个基本的模板驱动表单：

<form>
  <label>
    First Name:
    <input type="text" name="firstName" [(ngModel)]="firstName">
  </label>
  <label>
    Last Name:
    <input type="text" name="lastName" [(ngModel)]="lastName">
  </label>
  <button type="submit">Submit</button>
</form>

上述代码片段演示了一个基本的表单。此表单包含两个输入框，每个输入框绑定到组件中的属性。可以使用组件中的属性来访问所输入的值。

响应式表单

Angular7的响应式表单是基于可观察对象的数据流。响应式表单提供了更多的控制，因为可以在组件中定义表单的结构和逻辑。表单的结构是通过使用FormGroup、FormArray和FormControl来定义的。在组件中定义表单结构之后，可以在模板中使用formGroup指令来使用表单。模板中的表单控件可以使用formControlName指令与FormGroup中的FormControl对象绑定。

Angular7还提供了Validators和AsyncValidators来验证表单数据。Validators和AsyncValidators可以在FormControl和FormGroup中使用。

示例

以下代码片段演示了一个基本的响应式表单：

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

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <label>
        First Name:
        <input type="text" formControlName="firstName">
      </label>
      <label>
        Last Name:
        <input type="text" formControlName="lastName">
      </label>
      <button type="submit" [disabled]="!form.valid">Submit</button>
    </form>
  `
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required]
    });
  }
}

上述代码片段演示了一个基本的响应式表单。FormGroup由使用FormBuilder创建，并定义了两个FormControl对象：firstName和lastName。可以使用Validators.required验证器来要求字段是必填的。表单的有效性可以通过form.valid属性检查。