forms - Angular 2 - 警告/提示的表单验证

Question

我正在尝试添加不会使表单无效的表单验证。验证应仅显示为警告。

例如年龄验证。年龄大于 90 表示警告，年龄大于 120 表示错误。

我试过在一个表单上使用两个 FormGroup，在输入字段上使用两个 [formControl]。仅使用第一个 [formControl]。

是否可以使用 Angulars 表单验证来进行这种验证？应该采用哪种方法？

Answer 1

我是通过创建自定义验证器来完成的，它总是返回 null。此验证器还创建了额外的属性 warnings。然后只需从您的 View 中检查此属性即可。

export interface AbstractControlWarn extends AbstractControl { warnings: any; }

export function tooBigAgeWarning(c: AbstractControlWarn) {
  if (!c.value) { return null; }
  let val = +c.value;
  c.warnings = val > 90 && val <= 120 ? { tooBigAge: {val} } : null;
  return null;
}

export function impossibleAgeValidator(c: AbstractControl) {
  if (tooBigAgeWarning(c) !== null) { return null; }
  let val = +c.value;
  return val > 120 ? { impossibleAge: {val} } : null;
}

@Component({
  selector: 'my-app',
  template: `
    <div [formGroup]="form">
      Age: <input formControlName="age"/>
      <div *ngIf="age.errors?.required" [hidden]="age.pristine">
      Error! Age is required
      </div>
      <div *ngIf="age.errors?.impossibleAge" [hidden]="age.pristine">
      Error! Age is greater then 120
      </div>
      <div *ngIf="age.warnings?.tooBigAge" [hidden]="age.pristine">
      Warning! Age is greater then 90
      </div>
      <p><button type=button [disabled]="!form.valid">Send</button>
    </div>
  `,
})
export class App {
  age: FormControl;
  constructor(private _fb: FormBuilder) { }
  ngOnInit() {
    this.form = this._fb.group({
      age: ['', [
        Validators.required,
        tooBigAgeWarning,
        impossibleAgeValidator]]
    })
    this.age = this.form.get("age");
  }
}

示例:https://plnkr.co/edit/me0pHePkcM5xPQ7nzJwZ?p=preview