Angular 2 - FormControl setValue'only'Self'参数

Question

尝试理解传递给setValue时'onlySelf'参数的作用.

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

文档说:"如果onlySelf为true,则此更改只会影响此FormControl的验证,而不会影响其父组件.默认为false."

但是我很难理解这一点.使用Angulars的模型驱动形式仍然相当新.

Answer 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

Answer 2

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

如果您拥有此属性可能会让您感到困惑,但有时候您可能因为一个值或控件而无法使表单无效.可能您在服务器上有一些高级检查,并且您想要更正服务器上的值,或者您可能依赖于当时可能不可用的某些外部Web服务的值.我确信有很多场景,但这是我的头脑.