angular 表单验证

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `
    <form>
      账号: <input type="text" required #uname="ngModel" name="username"  [(ngModel)]="formData.username" /> <br>
      <label>{{uname.valid}}</label> <br>
      密码: <input type="text" required #psw="ngModel" name="password" [(ngModel)]="formData.password"/> <br>
      <label>{{psw.valid}}</label> <br>
      <button (click)="submit()">提交</button>
    </form>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  formData={
    username:"",
    password:""
  }
  submit(){
    debugger
  }
}

结果

表单验证主要是利用ngModel的属性

<input type="text" required #uname="ngModel" name="username"  [(ngModel)]="formData.username" /> <br>
      <label>{{uname.valid}}</label> <br>

这里解释下代码。首先required表示必填，#uname=“ngModel” 可以在模板本地拿到ngModel的变量；[(ngModel)]="formData.username"则是双向绑定值
然后angular内部提供了ngModel的验证机制

• ng-touched/ng-untouched 控件已经访问过的
• ng-dirty/ng-pristine 控件值发生变化
• ng-valid/ng-invalid 控件值是有效的

利用这些可以做一些简单的表单验证机制