我在formcontrol上设置了Validators.pattern（）来验证是否输入了正确的电话号码。我还向项目添加了一个属性指令，以屏蔽以下格式的电话号码输入-123 / 456-7890。该指令强制执行掩码，并通过valueAccessor.writeValue（）设置值。
输入有效的电话号码后，表单控件的无效状态为false，表示输入内容与模式匹配。但是，如果用户尝试输入另一个字符，而该指令阻止显示其他输入，则控件上的无效状态为true。这会使用户感到困惑，因为他们看到一个有效的电话号码，但是直到他们退格并重新输入一个号码后，控件才会生效。
Stackblitz-https://angular6-phone-mask-uytj4e.stackblitz.io
Stackblitz编辑器-https://stackblitz.com/edit/angular6-phone-mask-uytj4e
要复制，请输入10位数字。您应该看到控件周围的红色边框消失了。然后输入第11位数字（或任何字符）。尽管没有显示其他文本，您仍将看到控件周围的边框再次变为红色。
我知道上述解决方法是在输入中设置maxlength属性。但是我仍然很好奇如何解决根本问题。
答案 0 :(得分：1)
您可以尝试
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}')]
这可以解决您的问题，但这不是最佳解决方案。