Angular 5 Reactive Form Conditional Validation

时间:2018-06-13 19:00:01

标签: angular angular-reactive-forms angular-validation angular-ngselect

我有一个大的反应形式,它基于从应该触发验证的多选输入所做的选择进行条件验证。我注意到,当选择或取消选择某个项目时,整个表单被标记为无效(使用ng-invalid类),但内部子输入在它们应该有效时表示无效,或者反之亦然UNTIL你要么关注输入或者如果您只是在页面上的任何位置单击选择之外。

https://stackblitz.com/edit/angular-6mbw5r

Repro步骤:

  1. 打开开发工具,注意整个标记在加载时设置为ng-invalid。唯一应该无效的字段是DEA表单字段。
  2. 从服务水平多重选择中删除受控物质。请注意,表单从class="ng-untouched ng-pristine ng-invalid"转到class="ng-untouched ng-invalid ng-dirty" UNTIL您单击ng-select(或任何其他字段)组件。然后转到class="ng-dirty ng-touched ng-valid"
  3. 注意必要字段如何根据表单的当前状态进行更改或不更改,直到发生其他一些操作(如更改焦点)为止。
  4. 备用Repro步骤:

    1. 加载页面并选中Veteranarian复选框。这应该会触发状态许可证无效,但直到您点击其他位置才会触发。
    2. 我已经进行了OnPush更改检测,并且确保我可以随时随地进行任何条件更改markForCheck()。我还将整个表单组更新策略设置为'change',根据我的理解,应该在表单字段更改值后立即触发验证。

      我已经阅读了很多关于如何使用角度(https://www.dev6.com/Angular2-Conditional-Validation-with-Reactive-Formshttps://dzone.com/articles/how-to-do-conditional-validation-on-valuechanges-m)中的反应形式进行条件表单验证的文章。

      我还以为我已经弄明白了这两个问题:https://github.com/angular/angular/issues/13200 https://github.com/angular/angular/issues/14542(stackblitz链接中的第161行),但这也没有帮助。

      似乎与点击事件后发生的变更检测有关(我知道检测应该发生在事件,异步事件等)或valueChanges订阅不能在兄弟组件之间准确更新直到焦点已经改变。我推测updateValueAndValidity()会触发变化检测,但似乎没有。

      任何帮助都会很棒!

0 个答案:

没有答案