【Angular 08】标签的渲染原理、响应式表单

标签的渲染原理

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 = '';
}

响应式表单

ReactiveFormsModule Example

响应式表单 API 汇总

这些类和指令的完整语法

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）

自定义同步验证器