Angular表单

使用模版式表单 imports FormsModule

使用响应式表单 imports ReactiveFormsModule

 

模版式表单 

 

表单的数据模型通过组件模版中的相关指令来定义的，因为使用这种方式定义的表单数据模型时，我们会受限于HTML的语法，所以，模版驱动方式只适用于一些简单的场景。

 

NgForm 

标记有NgForm的表单会自动发现标有NgModel的字元素，会阻止默认的表单提交，会使用ngSubmit来代替。

 

NgModel

在模版表单中不需要【（）】,因为它是不是双向绑定，也不需要在控制器中写对应的属性，但需要指定name属性并赋值。可以通过模版本地变量（#myname）来访问value值

 

NgModelGroup

代表表单的一部分，允许你将一些表单字段组织在一起，形成更清晰的层次关系。

 

<form #myForm="ngForm" (ngSubmit)="createForm(myForm.value)">
<div>用户名<input type="text" ngModel name="username"></div>
<div>密码<input type="text" ngModel name="password"></div>
<button>登陆</button>
</form>

<div>
    {{myForm.value | json}}
</div>

 

value是一个javascript对象，保存着表单中所有字段的值，通过json管道将值显示到页面上。

 

 

响应式表单

 

使用响应式表单时，你通过编写TyoeScript代码而不是Html代码来创建一个底层的数据模型，在这个模型定义好以后，你使用一些特定的指令，将模版上的html元素与底层的数据模型连接在一起。

 

不管时那种表单，都有一个对应的数据模型来存储表单的数据。在模版式表单中，数据模型是由angular基于你组件模版中的指令隐式创建的。而在响应式表单中，你通过编码明确的创建数据模型然后将模版上的Html元素与底层的数据模型连接在一起。

 

数据模型并不是一个任意的对象，它是一个由angular/forms模块中的一些特定的类，如formControl,formGroup,formArray等组成。在模版式表单中，你是不能直接访问到这些类的。

 

响应式表单并不会替你生成HTML，模版仍然需要你自己来编写。

 

formControl

formGroup

formArray

formBuilder

 

创建数据结构并添加验证

 

import { FormGroup, FormBuilder, FormControl, Validators, FormControlName, FormArray } from '@angular/forms';
import {nikename, passwordValidator} from '../../validators/main.valid';

 private formModel: FormGroup;
 private fb: FormBuilder = new FormBuilder();

 this.formModel = this.fb.group({
      nikename: ['', [nikename]],
      phone: ['', [Validators.required]],
      emails: this.fb.array(['']),
      passwordInfo: this.fb.group({
        password: [''],
        passwordConfirm: ['']
      }, { validator: passwordValidator })
   });

 

<form [formGroup]="formModel" (submit)="createform()">
  <div>
    昵称:
    <input type="text" formControlName="nikename">
  </div>
  <div [hidden]="formModel.get('nikename').untouched">
    <div [hidden]="!formModel.hasError('nikename','nikename')">
      {{formModel.getError('nikename','nikename')?.error}}
    </div>
 </div>
  <div>
    手机:
    <input type="text" formControlName="phone">
  </div>
 <div [hidden]="formModel.get('phone').untouched">
    <div [hidden]="formModel.hasError(required,'phone')">手机号不能为空</div>
 </div>
  <div>
    邮箱：
    <ul formArrayName="emails">
      <li *ngFor="let email of formModel.get('emails').controls;let i=index">
        <input type="text" [formControlName]="i">
      </li>
    </ul>
    <button type="button" (click)="addEmail()">add email</button>
  </div>
  <div formGroupName="passwordInfo">
    <div>
      密码
      <input type="text" formControlName="password">
    </div>
    <div>
      确认密码
      <input type="text" formControlName="passwordConfirm">
    </div>
  </div>
  <div [hidden]="!formModel.get('passwordInfo').dirty">
    <div [hidden]="!formModel.hasError('password','passwordInfo')">
      {{formModel.getError('password','passwordInfo')?.error}}
    </div>
  </div>
  <button>submit</button>
</form>

 

 

状态字段

 

touched和untouched 用户是访问过，是否获取过焦点

pristine和dirty 判断值是否发生变化（手机）

pending（异步校验 pending = true）

 

.ng-invalid {}

 

 

模板式表单校验

 

生成指令

Ng g directives directives/emailValidator

 

在组件中使用mobile自定义的验证指令