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
    <input type=\"text\" formControlName=\"firstName\">

//html
<form #heroForm=\"ngForm\" appIdentityRevealed (ngSubmit)=\" ()\">
  <div >
   <label for=\"name\">Name</label>
   <input type=\"text\" id=\"name\" required [(ngModel)]=\"model.name\" [ngModelOptions]=\"{updateOn: \'blur\'}\" name=\"name\">

  <div >
   <label for=\"power\">Hero Power</label>
   <select id=\"power\" class=\"form-control\" required [(ngModel)]=\"model.power\" name=\"power\">
    <option *ngFor=\"let power of powers\" [value]=\"power\">{{power}}</option>
   </select>
  </div>

  <button type=\"button\" (click)=\"newHero();heroForm.reset()\">
   New Hero
  </button>
  <button type=\"submit\" [disabled]=\"!heroForm.form.valid\">
   Submit
  </button>
 </form>
//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, Validati s } 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
<input type=\"text\" required [(ngModel)]=\"model.name\" name=\"name\" appForbiddenName=\"bob\">