基于下拉选择的Angular 8设置输入验证[重复]

Question

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

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

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

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

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

任何想法将不胜感激。

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

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();
  }
}