Angular 6-表单

Angular 6是一个现代的JavaScript框架，它经常用于web应用程序的构建，包括表单。Angular提供一个强大的表单模块，它能够处理各种表单输入和验证需求。本文将介绍Angular 6表单模块的基础知识。

表单模块

Angular 6的表单模块是一个独立功能模块，需要从@angular/forms导入。它由以下几个组成部分：

FormControl

FormControl类表示单个表单控件的值和验证器。它可以接受单个值或一个对象，用于指定控件的默认值和验证规则。以下是一个最基本的FormControl的例子：

import { FormControl } from '@angular/forms';

const usernameControl = new FormControl();

FormGroup

FormGroup类表示一组具有公共实用程序和验证器的表单控件。它由各种 FormControl 对象组成，并且可以表示嵌套表单。以下是一个FormGroup的例子：

import { FormGroup, FormControl } from '@angular/forms';

const userForm = new FormGroup({
  username: new FormControl(),
  password: new FormControl()
});

FormBuilder

FormBuilder是一个帮助器类，用于构建FormGroup。它提供了一些方法，使表单的构建更加简单。以下是一个使用FormBuilder的例子：

import { FormBuilder } from '@angular/forms';

const fb = new FormBuilder();

const userForm = fb.group({
  username: '',
  password: ''
});

FormArray

FormArray类表示表单中的数组。它包含由 FormControl 对象组成的数组。以下是一个FormArray的例子：

import { FormArray, FormControl } from '@angular/forms';

const phoneNumbersArray = new FormArray([
  new FormControl('')
]);

模板驱动表单

模板驱动表单是Angular中的一种表单类型，它通过修改模板视图以及使用内置指令来实现。以下是一个模板驱动表单的例子：

<form (ngSubmit)="onSubmit()">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" ngModel name="username" required>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" ngModel name="password" required>
  </div>
  <button type="submit">Submit</button>
</form>

在该例子中，我们使用了ngModel指令来自动创建FormControl，并设置了控件的name属性。我们也使用了required属性来进行验证。请注意，必须在app.module.ts文件中导入FormsModule。

响应式表单

响应式表单是通过使用代码来创建表单控件和验证器的一种表单类型。以下是一个响应式表单的例子：

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="username">Username:</label>
    <input formControlName="username">
  </div>
  <div>
    <label for="password">Password:</label>
    <input formControlName="password">
  </div>
  <button type="submit">Submit</button>
</form>

在该例子中，我们使用了响应式表单，在组件中定义了FormGroup对象，并在模板中使用formGroup来绑定它。我们还使用了formControlName来绑定每个输入到响应式表单中的FormControl。

总结

本文介绍了Angular 6表单模块的基础知识。这个模块包含了许多不同的类和组件，可以帮助我们创建和验证各种表单。无论是模板驱动表单还是响应式表单，我们都可以根据不同的需求选择使用。使用Angular 6的表单模块，可以使我们在web应用程序中处理表单变得更加容易和高效。