标签的渲染原理
Angular 支持的两类表单
响应式表单和模板驱动表单都建立在下列基础类之上:
- FormControl 实例用于追踪单个表单控件的值和验证状态
- FormGroup 用于追踪一个表单控件组的值和验证状态
- FormArray 用于追踪表单控件数组的值和验证状态
- ControlValueAccessor 用于在 Angular 的 FormControl 实例和原生 DOM 元素之间创建一个桥梁
响应式表单
- 比模板驱动表单更有可伸缩性
- 提供对底层表单 API 的直接访问,对表单数据模型的同步访问
示例:在组件类中显式地定义表单模型
[formControl] 指令会通过内部值访问器来把显式创建的 FormControl 实例与视图中的特定表单元素联系起来
-
import { Component } from '@angular/core'; import { FormControl } from '@angular/forms'; @Component({ selector: 'app-reactive-favorite-color', template: ` Favorite Color: <input type="text" [formControl]="favoriteColorControl"> ` }) export class FavoriteColorComponent { favoriteColorControl = new FormControl(''); }
模板驱动表单
- 专注于简单的场景,可复用性没那么高
- 只提供对表单数据模型的异步访问
示例:指令 NgModel 为指定的表单元素隐式创建并管理一个 FormControl 实例
-
import { Component } from '@angular/core'; @Component({ selector: 'app-template-favorite-color', template: ` Favorite Color: <input type="text" [(ngModel)]="favoriteColor"> ` }) export class FavoriteColorComponent { favoriteColor = ''; }
- FormControl 表单项
-
import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; @Component({ selector: 'app-name-editor', templateUrl: './name-editor.component.html' }) export class NameEditorComponent implements OnInit { fcName = new FormControl(); constructor() { } ngOnInit(): void { } fcUpdateName() { this.fcName.setValue('formControl 上的setValue() 方法更新表单项~'); } }
<p>Value: {{ fcName.value }}</p> <label>姓名: <input type="text" [formControl]="fcName"> </label> <p><button (click)="fcUpdateName()">Update Name</button></p>
- FormGroup 表单
-
<form [formGroup]="formRegister" (ngSubmit)="handleSubmit()"> <label>帐号: <input type="text" formControlName="username"> </label> <label>密码: <input type="text" formControlName="password"> </label> <button type="submit" [disabled]="!formRegister.valid">提交表单</button> </form>
import { Component, OnInit } from '@angular/core'; import {FormControl, FormGroup} from '@angular/forms'; @Component({ selector: 'app-name-editor', templateUrl: './name-editor.component.html' }) export class NameEditorComponent implements OnInit { fcName = new FormControl(); formRegister = new FormGroup({ username: new FormControl('newUser'), password: new FormControl(''), }); constructor() { } ngOnInit(): void { } fcUpdateName() { this.fcName.setValue('formControl 上的setValue() 方法更新表单项~'); } handleSubmit() {} }
- FormBuilder 当需要与多个表单打交道时
组件中:
(1)导入 FormBuilder 类
(2)注入这个 FormBuilder 服务
(3)生成表单内容。
官方的表单验证器(https://angular.cn/api/forms/Validators)
自定义同步验证器
1
1
1
1
1
1
1
1
1
1
1