Using FormBuilder to Validate Reactive Forms in AngularJs2.

buildForm(): void {
    // 响应式验证绑定
    this.myForm = this.fb.group({
      'name': [this.person.name, [
          Validators.required,
          Validators.minLength(4),
          Validators.maxLength(24)
        ]
      ],
      'age': [this.person.age],
      'mobile': [this.person.mobile, Validators.required]
    });
    // 监控 myForm 表单值的改变
    this.myForm.valueChanges
      .subscribe(data => this.onValueChanged(data));
    // 调用验证
    this.onValueChanged(); // (re)set validation messages now
  }

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Person }  from './person.class';
@Component({
    selector: 'my-form',
    templateUrl: 'my-form.component.html',
    styleUrls: ['my-form.css']
})
export class myFormComponent {
    // 1. 声明我的表单为 FormGroup
    private myForm: FormGroup;
    // 2. 声明 person 对象
    private person = new Person();
    // 3. 实例化 FormBuilder
    constructor(private fb: FormBuilder) {}
    // 4. 页面初始化时, 调用表单绑定
    ngOnInit(): void {
        this.buildForm();
    }
    // 5. 表单绑定
    private buildForm(): void {
        this.myForm = fb.group({
            'name': [this.person.name, [Validators.required]],
            'mobile': [this.person.mobile, [
                 Validators.required,
                 Validators.minLength(9)
             ]]
        });
    }
}

<form [formGroup]="myForm" (submit)="onSubmit(myForm.value)">
    <div class="filed">
        <label for="name">Name: </label>
        <input type="text" required [formControl]="myForm.controls['name']" placeholder="昵称">
    </div>
    <div class="filed">
        <label for="mobile">Mobile: </label>
        <input type="text" required [formControl]="myForm.controls['mobile']" placeholder="联系方式">
    </div>
    <button type="submit" class="button">Submit</button>
</form>

// 5. 表单绑定
private buildForm(): void {
    this.myForm = fb.group({
        'name': [this.person.name, [Validators.required]],
        'mobile': [this.person.mobile, [
             Validators.required,
             Validators.minLength(9)
         ]]
    });
    this.myForm.valueChanges.subscribe(data => _that.onValueChanged(data));
    this.onValueChanged();  // (re)set validation messages now
}
// 6. 声明值改变的方法, 过滤要提示的错误信息
private onValueChanged(data?: any) {
    let _that = this;
    if (!_that.myForm) { return; }
    const form = _that.myForm;
    for (const field in _that.formErrors) {
        // clear previous error message (if any)
        _that.formErrors[field] = '';
        const control = form.get(field);
        if (control && control.dirty && !control.valid) {
            const messages = _that.validationMessages[field];
            for (const key in control.errors) {
                _that.formErrors[field] = messages[key];
            }
        }
    }
}
// 7. 最新错误信息记录
private formErrors = {
    'name': '',
    'mobile': ''
};
// 8. 元素的多个提示信息组
private validationMessages = {
    'name': {
        'required': '昵称是必填项'
    },
    'mobile': {
        'required': '年龄是必填项',
        'minlength': '最少为 9 为数字'
    }
};

import { ValidatorFn, FormControl } from '@angular/forms';
export function PatternValidator(pattern: RegExp): ValidatorFn {
    return (control: FormControl): { [s: string]: boolean } => {
        // 1. pattern 为 RegExp 类型的参数, 在这里先做个简单的兼容
        const reg = pattern instanceof RegExp ? pattern : new RegExp(pattern, 'i');
        // 2. control.value 就是我们 input 当中的值
        const res = !reg.test(control.value);
        // 3. 不符合我们的正则要求, 就返回 true, 否则返回 null
        return res ? {'pattern': true} : null;
    }
}

import { PatternValidator } from "../directives/form/v-pattern.directive";
export class myFormComponent {
    // 5. 表单绑定
    private buildForm(): void {
        this.myForm = fb.group({
            'name': [this.person.name, [
                 Validators.required,
                 PatternValidator(/^[\S\s]{0,20}$/)        // 我希望昵称是 1~20 位任意字符
             ]],
            'mobile': [this.person.mobile, [
                 Validators.required,
                 PatternValidator(/^1[3|4|5|7|8]\d{9}$/)   // 我希望联系方式是符合正规号码 9位, 并已 13, 14, 15, 17, 18开头
             ]]
        });
        this.myForm.valueChanges.subscribe(data => _that.onValueChanged(data));
        this.onValueChanged();  // (re)set validation messages now
    }
    // 6. 省略
    // 7. 省略
    // 8. 元素的多个提示信息组
    private validationMessages = {
        'name': {
            'required': '昵称是必填项',
            'pattern': '1~20 位字符'         // pattern 是我们指令抛出的key值
        },
        'mobile': {
            'required': '年龄是必填项',
            'pattern': '号码格式错误'
        }
    };
}

// 2. 声明 person 对象
private person = new Person();

export class Person {
    public id: number;
    public name: string;
    public mobile: string;
    public active: number = 0;  // 初始一个默认值有好处哦
}

// 使用 Person 的类模型的值
let data = this.person;

// 1. 声明我的表单为 FormGroup
private myForm: FormGroup;

// 使用 myForm 的值
let data = this.myForm.value;

private sth: any;
private buildForm(): void {
    this.myForm = fb.group({
        'sth': ['', [Validators.required]]
    });
    this.sth = this.myForm.controls['sth'];
    this.sth.valueChanges.subscribe( (value: string) => {
            console.log('sth changed to:', value);
          }
    );
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 重要的一部分
import { FormsModule, ReactiveFormsModule }   from '@angular/forms';
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,             // 在这里 imports
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}