Angular2 表单禁用提交

Question

我在带有 angular2 的注册表单中添加了一个 recaptcha。我有一个控制器来匹配 recaptcha 和所需的验证器。

this.captchaControl = fb.control(false, Validators.required); 
this.userForm = fb.group({
    ...
    captchaControl: this.captchaControl
});

并且当用户回答时该值被正确设置为 true。

checkReCaptcha(response){
    console.log(this.userForm.valid);
    this.captcha = response;
    this.captchaControl.updateValue(true);
    console.log(this.userForm.valid);
}

第一个控制台日志显示 false，第二个打印 true。

在提交按钮中，我设置了禁用功能：

<button type="submit" [disabled]="!userForm.valid" class="btn btn-d">Register</button>

但按钮保持禁用状态。

如何触发按钮再次检查 userForm 的有效性？

更新这是我的问题的一个例子。 http://plnkr.co/edit/Rwy6Oc5JEEm7yIJYnxJX?p=preview

完成表单后，即使表单有效，红色按钮也会保持禁用状态。如果您触摸任何其他输入表单（或其他提交按钮），禁用按钮将更新并可用，但我希望它在所有输入都定义后可用...

Answer 1

看起来像是代码运行ning 在 Angulars 区域之外引起的变更检测问题。

注入 ApplicationRef 并在值更改后调用 tick()`

import {ApplicationRef} from 'angular2/core';

constructor(private appRef:ApplicationRef){} 

checkReCaptcha(response){
    console.log(this.userForm.valid);
    this.captcha = response;
    this.captchaControl.updateValue(true);
    this.appRef.tick();
    console.log(this.userForm.valid);
}

这使 Angular 意识到需要进行更改检测。

http://plnkr.co/edit/nYKqtXaaDl69eeL35GTL?p=info

有趣的是，实际上没有其他调用变化检测的方法有效。

设置超时(...)
ChangeDetectorRef.markForCheck()
zone.run(...)

没有对运行进行新的更改检测。至少当我将绑定 {{userForm.valid}} 更改为 {{isUserFormValid()}} 时，isUserFormValid() 没有被调用。

只有 this.appRef.tick() 使 Angular2 重新评估绑定。

Angular2 表单禁用提交

Angular2 form disable submit

forms

validation

button

recaptcha

angular