Angular 2 - FormControl setValue 'onlySelf' 参数

Question

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

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

文档说："If onlySelf is true, this change will only affect the validation of this FormControl and not its parent component. This defaults to false."

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

Answer 1

Angular2 默认情况下会检查表单 control/form 组的有效性，只要有任何表单元素值的更新，就会级联到顶层，除非你拒绝。 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

Answer 2

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

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

Angular 2 - FormControl setValue 'onlySelf' 参数

Angular 2 - FormControl setValue 'onlySelf' parameter

forms

setvalue

angular