如何强制 Angular 2 重新检查验证器？

Question

我有一个用 Angular 2 反应式（数据驱动）模板编写的简单登录表单。它运行良好，但是当我刷新页面并且浏览器填写电子邮件+密码（自动完成）时，我的表单的有效属性似乎是错误的。

但是，当我在表单无效的情况下按任意键或单击页面中的任意位置时，angular 会更新某些状态（我猜）并且我的表单变得有效。

我怎样才能触发那个状态？我怎么能说有角度的“嘿，再次检查我的表格。”？我无法触发自己的验证脚本，因为某些验证消息是警报。如果我这样做，当用户打开此页面时，他/她将看到这些警报。

我记得，我使用 trigger('input') 技巧来更新 ng-model。

Answer 1

updateValueAndValidity()就是你要找的。文档在这里：AbstractControl。它可以强制重新计算控件的值和验证状态。

这是一个演示：

form.component.ts

export class FormComponent implements OnInit {
  myform: FormGroup;

  // explicit validation of each field
  emailValid: AbstractControl;
  passwordValid: AbstractControl;

  constructor(private fb: FormBuilder) {
    this.myform = fb.group({
      'email': ['', Validators.required],
      'password': ['', Validators.required],
    });

    this.emailValid = this.myform.controls['email'];
    this.passwordValid = this.myform.controls['password'];
  }

    ngOnInit() {
        this.myform.get('email').valueChanges.subscribe(()=>forceValidAgain());
        this.myform.get('password').valueChanges.subscribe(()=>forceValidAgain());
    }

  forceValidAgain(){
    this.emailValid.updateValueAndValidity();
    this.passwordValid.updateValueAndValidity();
  }
}

表单.组件.html

export class FormComponent implements OnInit {
  myform: FormGroup;

  // explicit validation of each field
  emailValid: AbstractControl;
  passwordValid: AbstractControl;

  constructor(private fb: FormBuilder) {
    this.myform = fb.group({
      'email': ['', Validators.required],
      'password': ['', Validators.required],
    });

    this.emailValid = this.myform.controls['email'];
    this.passwordValid = this.myform.controls['password'];
  }

    ngOnInit() {
        this.myform.get('email').valueChanges.subscribe(()=>forceValidAgain());
        this.myform.get('password').valueChanges.subscribe(()=>forceValidAgain());
    }

  forceValidAgain(){
    this.emailValid.updateValueAndValidity();
    this.passwordValid.updateValueAndValidity();
  }
}