Angular 2 - FormControl setValue 'onlySelf' 参数答案

【问题标题】：Angular 2 - FormControl setValue 'onlySelf' parameterAngular 2 - FormControl setValue 'onlySelf' 参数
【发布时间】：2017-01-28 21:27:57
【问题描述】：

试图了解传递给 setValue 时 'onlySelf' 参数的作用。

this.form.get('name').setValue('', { onlySelf: true })

文档说：“如果 onlySelf 为 true，则此更改只会影响此 FormControl 的验证，而不影响其父组件。默认为 false。”

但是我很难理解这一点。对于使用 Angulars 的模型驱动表单来说还是相当新的。

【问题讨论】：

标签： forms angular setvalue

【解决方案1】：

默认情况下，只要任何表单元素值有更新，除非您拒绝，否则 Angular2 将逐级检查表单控件/表单组的有效性，直至顶层。 onlySelf 是帮助您做到这一点的工具。

假设您有一个loginForm，其中包含一个username 字段和一个password 字段，这两个字段都是必需的，如下所示：

this.userNameControl = this.formBuilder.control('Harry', Validators.required);
this.passwordControl = this.formBuilder.control('S3cReT', Validators.required);
this.loginForm = this.formBuilder.group({
  userName: this.userNameControl,
  password: this.passwordControl
});

在这段代码之后，this.loginForm.valid 是true。

如果您使用默认设置 (onlySelf = false) 设置控件的值，Angular2 将更新控件的有效性以及表单组的有效性。例如，这个：

this.passwordControl.setValue('');

将导致

this.passwordControl.valid === false
this.loginForm.valid === false

但是，这个：

this.passwordControl.setValue('', { onlySelf: true });

只会改变passwordControl的有效性：

this.passwordControl.valid === false
this.loginForm.valid === true

【讨论】：

【解决方案2】：

这样说吧，假设您有一个名为mainForm 的表单，它是有效的。它上面有四个控件，所有四个都有一个值。现在，您决定更新其中一个控件的值，假设您将其更新为某个不正确的值并指定onlySelf: true。如果你尝试调用this.mainForm.valid，你会得到你的表单是valid的结果，即使你的控件是not valid，并且它的invalid状态不应该允许表单要提交。但由于表单的有效属性报告为真，您将向后端提交不一致的值。

您可能会感到困惑，为什么会有此属性，但有时您可能不想因为一个值或控件而使表单无效。可能您对服务器进行了一些高级检查，并且您希望更正服务器上的值，或者您可能依赖于某个当时可能不可用的外部 Web 服务的值。我敢肯定有很多场景，但这是我的想法。

【讨论】：