GraphQL 自定义指令 Mxnet Java包装类 idea 常用快捷键 VMware windows uiwebview swift2 Animsition vue插件 vue图表 vue的优点 vue数据绑定 pmp教程 erp系统源码 jquery循环 python查看数据类型 mysql配置远程连接 python环境搭建 python中get函数 python命令 python的开发工具 java中substring java抽象 javase教程 java的正则表达式 java语言 java读文件 java列表 广告代码 navicat注册机 苹果剪辑 视频字幕提取器 linux多线程编程 黑市商人 地下城怎么双开 位置不可用 git命令 gunzip
当前位置: 首页 > 学习教程  > web前端教程 > angular教程 > angular 4.x教程

Angular Form表单

2017/7/1 14:00:18 文章标签:

Angular 中有两种表单:Template-driven Forms (类似于 AngularJS 1.x 中的表单 )Reactive FormsTemplate-driven 表单的特点使用方便适用于简单的场景通过 [(ngModel)] 实现数据双向绑定自动生成 Form Model (异步)最小化组件类的代码不易于单元测试Reactive 表单的特点比较灵…

Angular 中有两种表单:

  • Template-driven Forms (类似于 AngularJS 1.x 中的表单 )

  • Reactive Forms

Template-driven 表单的特点

  • 使用方便

  • 适用于简单的场景

  • 通过 [(ngModel)] 实现数据双向绑定

  • 自动生成 Form Model (异步)

  • 最小化组件类的代码

  • 不易于单元测试

Reactive 表单的特点

  • 比较灵活

  • 适用于复杂的场景

  • 简化了HTML模板的代码,把验证逻辑抽离到组件类中

  • 手动创建 Form Model (同步)

  • 方便的跟踪表单控件值的变化

  • 易于动态添加表单控件

  • 易于单元测试

Template-driven vs Reactive 表单

Template-driven 表单

  • 模板

    • Form 元素

    • Input 元素

    • 数据绑定

    • 验证规则 (属性设置,如 required)

    • 错误消息

    • 自动创建对应的表单模型 (如 FormGroup、FormControl)

  • 组件类

    • 属性绑定

    • 表单操作相关的方法,如表单提交 (submit)

  • 指令 (FormsModule)

    • ngForm

    • ngModel

    • ngModelGroup

Reactive 表单

  • 模板

    • Form 元素

    • Input 元素

    • Form 模型绑定

  • 组件类

    • Form 模型

    • 验证规则

    • 错误消息

    • 数据模型相关属性

    • 表单操作相关的方法,如表单提交 (submit)

  • 指令 (ReactiveFormsModule)

    • formGroup

    • formControl

    • formControlName

    • formGroupName

    • formArrayName

表单控件的状态

  • Value Changed

    • pristine - 表单控件值未改变

    • dirty - 表单控件值已改变

  • Validity

    • valid - 表单控件有效

    • invalid - 表单控件无效

  • Visited

    • touched - 表单控件已被访问过

    • untouched - 表单控件未被访问过

HTML Form vs Template-driven Form vs Reactive Form

HTML Form

<form>
  <div>
    <label>
      <span>用户名</span>
      <input
        type="text"
        name="userName"
        placeholder="请输入用户名">
    </label>
  </div>
  ...  <button type="submit">注册</button></form>

Template-driven Form

<form (ngSubmit)="save(signupForm)" #signupForm="ngForm">
  <div>
    <label>
      <span>用户名</span>
      <input type="text" name="userName"
        placeholder="请输入用户名"
        required minlength="3"
        [(ngModel)]="user.userName"
        #userName="ngModel">
    </label>
    <div *ngIf="userName.touched && userName.errors?.required">
      用户名是必填项    </div>
    <div *ngIf="userName.touched && userName.errors?.minlength">
      用户名的长度必须大于3    </div>
  </div>
  ...  <button type="submit">注册</button></form>

Reactive Form

<form (ngSubmit)="save()" [formGroup]="signupForm">
  <div>
    <label>
      <span>用户名</span>
      <input type="text" name="userName"
        placeholder="请输入用户名"
        formControlName="userName">
    </label>
    <div *ngIf="signupForm.get('userName').touched && 
        signupForm.get('userName').hasError('required')">
            用户名是必填项    </div>
    <div *ngIf="signupForm.get('userName').touched && 
        signupForm.get('userName').hasError('minlength')">
            用户名的长度必须大于3    </div>
  </div>
  ...  <button type="submit" [disabled]="signupForm.invalid">注册</button></form>

接下来我们主要来介绍一下 Reactive Form 的一些相关基础知识。

Reactive Form 简介

使用 Reactive Form

要使用 Reactive Form 需要以下几个步骤:

  • 导入 ReactiveFormsModule

import { ReactiveFormsModule } from "@angular/forms";
  • 在 NgModule 的 imports 属性值对应的数组中,添加 ReactiveFormsModule

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
})export class AppModule { }
  • 绑定 form 元素的 formGroup 属性

<form (ngSubmit)="save()" [formGroup]="signupForm"></form>
  • 关联 input 元素对应的 FormControl 实例

<input type="text" name="userName" placeholder="请输入用户名" 
  formControlName="userName">

使用 FormGroup

  • 创建 FormGroup 属性

  • 创建 FormGroup 实例

  • 创建每个 FormControl 实例

signupForm: FormGroup; 

this.signupForm = new FormGroup({
  userName: new FormControl('', [Validators.required, Validators.minLength(3)]),
  email: new FormControl('', [Validators.required, Validators.email]),
  ...
});

使用 FormBuilder

要使用 FormBuilder 需要以下几个步骤:

  • 导入 FormBuilder

  • 注入 FormBuilder 实例

  • 使用 FormBuilder 实例

FormBuilder 创建 Form Control 语法

  • 方式一

this.signupForm = this.fb.group({
  userName: 'semlinker',
  hasAddress: false});
  • 方式二

this.signupForm = this.fb.group({
  userName: {value: 'semlinker', disabled: true}
  hasAddress: {value: true, disabled: false}
});
  • 方式三

this.signupForm = this.fb.group({
  userName: [''],
  hasAddress: [{value: true, disabled: false}]
})



本文链接: http://www.dtmao.cc/news_show_103.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?