Question

我正在尝试将应用迁移到使用ChangeDetectionStrategy.OnPush。但是，我在尝试使用一些反应形式时遇到了一些障碍。

我有一个可重用的控件，它根据一些状态标志（例如*ngIf="control.touched && control.invalid"）显示验证消息。我遇到的问题是无法检测到touched标志何时更改，因此无法使用ChangeDetectorRef来触发更改检测。

可以通过侦听click事件并参考输入元素本身来完成操作，但这并不说明何时使用markAsTouched()，并且始终不可能传递对元素的引用，而且总是很不雅致。

是否可以使用OnPush并仍然响应表单控制状态（例如touched），还是通常很痛苦？

Answer 1

我不知道您是否在寻找直接使用新FormGroup创建ReactiveForm的新方法。对不起，如果我不明白您的问题。例如

//before
this.myForm=this.formBuilder({
   control1:''
   })
//after
this.myForm=new FormGroup({
   control1:new FormControl(''),
},{ updateOn: 'blur' })

Answer 2

您可以侦听状态更改，然后调用markForCheck()来更新视图：

constructor(changeDetectorRef: ChangeDetectorRef) {
  this.formGroup.statusChanges.subscribe(status => changeDetectorRef.markForCheck());
}

更新：由于我无法发表评论，因此我将更新此答案。

您对statusChanges是正确的。当然，您需要订阅statusChanges，这是一个错误。

我认为我们在这里遗漏了一点。在CheckOnce模式（OnPush）下，Angular将在DOM事件（包括模糊）之后检查是否有更改，因此应更新视图，并且您提及的消息（*ngIf="control.touched && control.invalid"）应该起作用。

但是，如果您在代码中调用markAsTouched()，则只有在调用markForCheck()时，才会检查更改。

这是一个有效的示例：https://stackblitz.com/edit/angular-6-reactive-form-validation-touched-sjhijt

显示具有反应性表单和ChangeDetectionStrategy.OnPush的验证消息

2 个答案: