Angular模板驱动表单

顾名思义，模板驱动表单是指表单的控制逻辑都是写在模板里的，一般常用在登录页中，如下例：
1、首先，引入FormsModule模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TemplateFormsComponent } from './components/templateForms/templateForms.component';
import { ReativeFormsComponent } from './components/reativeForms/reativeForms.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [
    TemplateFormsComponent,
    ReativeFormsComponent
  ]
})
export class ThreeFormsModule { }

2、在html中，将DOM表单转换为Angular表单，给form模板变量#f赋值ngForm。required、minlength、maxlength、pattren分别表示必填字段、最短字符、最长字符、正则匹配。
若需用户在输错值进行提示，给input模板绑定"ngModel"，若需样式一并改变，则在CSS中.ng-touched.ng-invalid添加相应属性
html

<form #f="ngForm" (submit)="OnSubmit(f)">
  <input type="text" name="username" required minlength="2" maxlength="6" ngModel pattern="[A-Z]+" #username="ngModel"><br>
  <div *ngIf="username.touched&&username.errors">
    <div *ngIf="username.errors.required">请输入内容</div>
    <div *ngIf="username.errors.minlength">最少2个字符</div>
    <div *ngIf="username.errors.maxlength">最多6个字符</div>
    <div *ngIf="username.errors.pattern">请输入大写字母</div>
  </div><br>
  <input type="text" name="password" ngModel required minlength="3" maxlength="7" pattern="[a-z]+" #password="ngModel"><br>
  <div *ngIf="password.touched&&password.errors">
    <div *ngIf="password.errors.required">请输入内容</div>
    <div *ngIf="password.errors.minlength">最少3个字符</div>
    <div *ngIf="password.errors.maxlength">最多7个字符</div>
    <div *ngIf="password.errors.pattern">请输入小写字母</div>
  </div>
  
  <button type="submit" [disabled]="!f.valid">提交</button>
</form>

ts

export class TemplateFormsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  OnSubmit(f: NgForm){
    console.log(f.value)
  }
}

css

input.ng-touched.ng-invalid {
    border: 1px solid red;
}

3、效果