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

  • 相关阅读:
    路由器配置——基于链路的OSPF简单口令认证
    路由器配置——基于区域的OSPF,MD5认证
    将博客搬至CSDN
    爬虫入门【11】Pyspider框架入门—使用HTML和CSS选择器下载小说
    爬虫入门【10】Pyspider框架简介及安装说明
    【Python基础】装饰器的解释和用法
    爬虫入门【9】Python链接Excel操作详解-openpyxl库
    爬虫实战【13】获取自己的动态代理ip池
    爬虫实战【12】使用cookie登陆豆瓣电影以及获取单个电影的所有短评
    爬虫实战【11】Python获取豆瓣热门电影信息
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/13686298.html
Copyright © 2011-2022 走看看