问通过valueAccessor.writeValue()设置值后，表单控件无效状态未更改
EN

Stack Overflow用户

提问于 2019-05-10 01:56:49

回答 1查看 109关注 0票数 0

我在表单控件上设置了一个Validators.pattern()来验证是否输入了正确的电话号码。我还向我的项目添加了一个属性指令，以屏蔽以下格式的电话号码输入-- 123/456-7890。该指令强制执行掩码，并通过valueAccessor.writeValue()设置值。

输入有效的电话号码后，表单控件无效状态为false，这意味着输入与模式匹配。但是，如果用户尝试输入另一个字符，而该指令阻止显示其他输入，则控件上的invalid状态为true。这使用户感到困惑，因为他们看到的是一个有效的电话号码，但直到他们退格并重新输入一个号码，控件才会生效。

要复制，请输入10位数字。您应该会看到控件周围的红色边框消失。然后输入第11位数字(或任意字符)。您将看到控件周围的边框再次变为红色，尽管没有显示其他文本。

我知道上述问题的一个快速解决方法是在输入上设置一个maxlength属性。但我仍然好奇如何解决根本问题。

发布于 2019-05-10 03:39:21

你可以试试这个

phone:['', Validators.pattern('^[0-9]{3}/[0-9]{3}-[0-9]{4,5}')]

而不是这个

phone:['', Validators.pattern('^[0-9]{3}/[0-9]{3}-[0-9]{4}')]

这将解决您的问题，但不是最好的解决方案。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56065072

复制

相似问题

问通过valueAccessor.writeValue()设置值后，表单控件无效状态未更改EN