未在NgIf中呈现时，删除角度4中的验证

Question

我想删除使用NgIf无法呈现控件的验证。我试图使用伪指令将其与隐藏控件一起删除，但由于它不在模板中呈现，因此无法执行相同操作。因此，我无法在指令中使用ElementRef来检查formControlName。这是ts文件

this.form = this._fb.group({
  text1: ['', Validators.required],
  text2:  ['', Validators.required]
});

和模板

<form[formGroup]="form">
  <input type="text" formControlName="text1">
 <div *ngIf="false">
  <input type="text" formControlName="text2">
</div>

我想动态且全局地删除text2的验证。不删除ts文件中的验证器。

Answer 1

Kara 的这个 Angular 源代码 GitHub 问题评论似乎非常相关，并说明了如何通过将反应模型视为“真实来源”来解决问题，并ngIf根据该真实来源创建您的表达，而不是相反。这表明它是设计使然，您必须努力不要混淆模板驱动和反应式表单的想法。

https://github.com/angular/angular/issues/7970#issuecomment-228624899

感谢您花时间描述问题。我查看了您的示例代码，似乎您使用的是反应式表单指令（又名“模型驱动”指令：ngFormModel 等），但使用的是模板驱动策略。ngIf 没有从表单的序列化和验证中删除控件的事实实际上是设计使然，原因如下。

在每种形式范式中——模板驱动的和反应式的——活动控件列表只能有一个真实来源。在模板驱动的范式中，真理的来源是模板。在反应式等价物中，真实来源是在父组件中创建的表单模型。DOM 不会规定表单的状态。出于这个原因，如果您在使用响应式方法的同时从 DOM 中删除表单控件元素，则表单控件在真实来源中不一定会发生变化，除非您希望它们发生变化。您可以选择通过调用 this.form.removeControl('controlName') 来强制更新控件，也可以选择将控件保留在表单中。这种灵活性允许您临时从 DOM 添加或删除输入，同时保持它们的表单值序列化（例如 如果您的表单有多个可折叠部分，您可以在不影响表单价值的情况下删除折叠部分）。我们不想通过强制模型始终匹配 DOM 来限制这种灵活性并使所有权复杂化。

因此，在您的情况下，如果您选择反应式策略，您将需要反转您的逻辑以依赖事实来源 - 模型。具体来说，这意味着通过在单击按钮时调用 this.form.removeControl('name') 来强制删除模型中的控件。然后，ngIf 应该依赖于模型中控件的存在，使用 *ngIf="form.contains('name')"，而不是相反。在此处查看示例 plunker：http ://plnkr.co/edit/V7bCFLSIEKTuxU9jcp6v?p=preview

值得注意的是，如果您仍在使用 beta.14（如在您的 plunker 中），则需要手动调用 this.form.updateValueAndValidity()。此要求已在 #9097 中删除，因此 RC.2 之后的版本不需要调用。

另一种选择是转换为模板驱动策略（无 ngFormModel），当它从模板中销毁时，它将从表单中删除控件。示例：http : //plnkr.co/edit/s9QWy9T8azQoTZKdm7uI?p=preview

我将关闭这个问题，因为它按预期工作，但我认为我们可以使体验更加友好。一个好的开始是文档中的更多食谱和指南。