angular中两种表单的区别(响应式和模板驱动表单)

    //ts
    profileForm = new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      address: new FormGroup({
       street: new FormControl(""),
       city: new FormControl(""),
       state: new FormControl(""),
       zip: new FormControl("")
      })
     })
    //html
    

//html

  

   Name
   

  

   Hero Power
   
    {{power}}
   
  

  
   New Hero
  
  
   Submit
  
 
//ts
model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

function forbiddenNameValidator(value: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const rule = new RegExp(value,'i');//设定验证规则,i是忽略大小写的意思
    const result = rule.test(control.value);//control.value是输入框的值,forbidden是正则结果
    return result ? { 'forbiddenName': { value: control.value } } : null;//如果匹配成功,则返回对象
  };
}

firstName:['',[forbiddenNameValidator('bob')]],

//ts
import { Directive, Input } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, ValidationErrors } from '@angular/forms';
import { FormGroup } from '@angular/forms';
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
 return (control: AbstractControl): { [key: string]: any } | null => {
  const forbidden = nameRe.test(control.value);
  return forbidden ? { 'forbiddenName': { value: control.value } } : null;
 };
}

@Directive({
 selector: '[appForbiddenName]',
 providers: [{ provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true }]
})
export class ForbiddenValidatorDirective implements Validator {
 @Input('appForbiddenName') forbiddenName: string;

 validate(control: AbstractControl): { [key: string]: any } | null {
  return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
   : null;
 }
}
//html