11.1.3 - 表单验证

pattern 验证正则 例如：pattern=”\d” 匹配一个数值

<form #f="ngForm" (submit)="onSubmit(f)">
  <input type="text" name="username" ngModel required pattern="\d" />
  <button type="submit" [disabled]="f.invalid">提交</button>
</form>

export class AppComponent {
  onSubmit(form: NgForm) {
      // 查看表单整体是否验证通过
      console.log(form.valid)
  }
}

在组件模板中显示表单项未通过时的错误信息

<form #f="ngForm" (submit)="onSubmit(f)">
  // #username 是自定义的模板变量名称，ngModel 是固定的
  <input #username="ngModel" name="username" ngModel required minlength="2" maxlength="6">
  <div>{{ username.errors | json}}</div>
  // username.touched 用户操作了
  <div *ngIf="username.touched && !username.valid && username.errors">
      <div *ngIf="username.errors['required']">请填写用户名</div>
      <div *ngIf="username.errors['minlength']">用户名最少{{ username.errors['minlength'].requiredLength }}</div>
  </div>
  <button type="submit">提交</button>
</form>

指定表单项未通过验证时的样式

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