angular - Angular 8 设置基于下拉选择的输入验证

Question

我是 Angular 的新手，发现这个验证概念非常棘手。但我一直在寻找互联网，我似乎无法找到我的问题的答案。尽管有很多关于 Angular 验证的好技巧和指南。

所以我的问题是我有一个下拉菜单，其中包含用户可以选择的 6 个选项。用户选择一个选项后，我希望输入字段更改验证。例如：

如果用户在下拉列表中选择选项 1。我希望输入字段具有所需的验证和最大长度 5 个令牌。

如果用户在下拉菜单中选择选项 2。我希望输入字段具有所需的验证和 10 个令牌的最大长度。

如果用户在下拉菜单中选择了选项 6。我希望在没有验证的情况下禁用输入字段。（如果用户选择了这个选项，那么验证表单组应该是有效的）

任何想法将不胜感激。

Angular 下拉验证中的答案不包括更改输入元素的验证。

标签： angularvalidationangular8

Answer 1

您可以使用valueChanges,setValidators()和来做到这一点clearValidators()。

首先，您需要使用valueChanges表单控件订阅下拉菜单的每个值更改。订阅将发出下拉列表的新值，并使用新值运行逻辑来决定需要应用的验证。之后，您可以使用该setValidators()方法为输入字段的表单控件设置验证。如果您需要删除验证，您可以使用该clearValidators()方法。您可以使用表单控件上的disable()和方法启用或禁用字段。enable()

例子：

field1.valueChanges.subscribe((val) => {
  if (val === 'a') {
    field2.setValidators([Validators.minLength(1)]);
  } else {
    field2.clearValidators();
  }
}