angular表单的使用实例

原文

https://www.jianshu.com/p/da1fd5396798

大纲

　　一、模板驱动表单的建立
　　二、响应式表单的建立
　　三、模板驱动型表单的自定义指令
　　四、响应式表单的自定义指令
　　五、父组件向子组件传递表单控制
　　六、代码素材

模板驱动表单的建立

//一、在根模块注入依赖模块
import { FormsModule }   from '@angular/forms';
//二、在模板中建立表单控件
<form>
  <div class="form-group">
    <label class="center-block">Name1:
      <input class="form-control">
    </label>
  </div>  
  <div class="form-group">
    <label class="center-block">Age1:
      <input class="form-control">
    </label>
  </div>
</form>
//三、在模板中添加ngModel同步数据
//四、数据校验：模板型表单的数据校验是写在模板上的，
//将require、minlength等校验规则写在模板上，从而定义对应表单控件的校验规则
//五、表单的提交，能够经过提交被监控的表单的值来达到表单的提交
//六、能够自定义设置表单数据的校验

响应式表单的建立

//一、在根模块注入依赖模块，引入ReactiveFormsModule
import { ReactiveFormsModule } from '@angular/forms';
//二、在模板中建立form表单
//三、在组件中建立响应式表单控制器
ReactiveForm = new FormGroup({
    age: new FormControl('',[Validators.required])
});
//四、监控表单的值的变化
/*
a：数据模型的值的变化：这里一样须要ngModel来绑定数据模型和表单模型的值，
不过须要注意的是，若是用ngModel来绑定表单控件，
那么经过new FormControl设置的默认值可能就会被ngModel的默认值给覆盖了
b：表单模型的值的变化：能够经过监控{{ReactiveForm.value.age}}来监控值的变化
*/
//五、数据的校验
/*
  各个表单控件的数据的校验是须要经过FormControl来设置的，
  能够看到每一个new FormControl后均可以对各个表单控件进行数据的校验。
*/
//六、表单的提交
/*
(ngSubmit)="onSubmit(user)"经过ngSumbit便可实现表单数据的提交，
user是表单的名字，即：[formGroup]="user"
*/
//七、能够自定义设置表单数据的校验

模板驱动型表单的自定义指令

　　模板型表单校验须要经过模板中添加属性才能够添加验证，因此须要继承指令Directive，在Directive中定义元数据并添加一系列的自定义的表单校验规则。

/**
  equalCrk.direvtive.ts
  使用：
  <input name="nickName" id="nickName" [(ngModel)]='nickName' validateCrk>
  当输入的数据不是crk的时候，表单的校验是不会经过的
**/
import { Directive, forwardRef, Attribute } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';

@Directive({
  selector: '[validateCrk][ngModel]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => CrkValidatorDirective),
      multi: true
    }
  ]
})
export class CrkValidatorDirective implements Validator {
  constructor(
    @Attribute('validateCrk') public validateCrk: string) {
  }
  validate(c: AbstractControl): { [key: string]: any } {
    // 控件自身值
    const self = c.value;
    // 控件的值是否等于'crk'
    if (self !== 'crk') {
      return {
        validateCrk: true
      };
    }
    return null;
  }
}

响应式表单的自定义指令

　　响应式的自定义校验相对来讲较简单，须要知足ValidatorFn便可。

/**
    响应式表单自定义指令
    使用：
     {validator: [this.validateEqualCrk('nickName','gg')]}
*/
validateEqualCrk(confirmKey: string, confirmStr?:string): ValidatorFn {
  return (group: FormGroup): {[key: string]: any} => {
    const confirmField = group.controls[confirmKey];
    const pattenStr = confirmStr ? confirmStr : 'crk'
    if (confirmField.value !== pattenStr) {
      return {
        validateEqualCrk: true
      };
    }
      return null;
  };
}

父组件向子组件传递表单控制

　　当表单中某个字段是以子组件的形式出现的时候，不能直接设置FormControl，所以须要向子组件传递FormControl而后在子组件添加，这样才能够实现父组件表单对子组件表单元素的控制。

代码素材

　　你能够在如下git代码中找到我上述讲述的知识点的实例代码（angular的实例代码中的angular-form）代码中对如何建立模板驱动型表单，响应式表单、使用FormBuilder建立响应式表单、建立自定义指令（响应式表单的和模板驱动表单的自定义指令都有）以及深层次传递表单控制等知识点都有涉及到。