zoukankan      html  css  js  c++  java
  • 【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

  • 相关阅读:
    Kaka's Matrix Travels
    Cable TV Network
    LightOJ 1137
    SPOJ AMR11E Distinct Primes 基础数论
    HDU 5533Dancing Stars on Me 基础几何
    POJ 1014 / HDU 1059 Dividing 多重背包+二进制分解
    vijos 1180 选课 树形DP
    vijos 1313 金明的预算方案 树形DP
    LightOJ 1062
    vijos 1464 积木游戏 DP
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/13686298.html
Copyright © 2011-2022 走看看