【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）

自定义同步验证器

•  

1

1

1

1

1

1

1

1

1

1

1