javascript - angular2，为什么这个 html5 验证在 ngForm 内外不起作用

Question

我创建了一个 plunkr 来演示这个问题。基本上有三个<input type="text"> html5 元素 pattern属性设置为 ^\d{2}[/]\d{2}[/]\d{4}$在他们所有人身上。这三个文本框之间的区别在于，其中一个直接位于 <form> 内。 ，另一个位于子组件内，位于 <form> 内标签。最后一个文本框完全在 <form> 之外我希望它们三个在模式验证上表现相同，因为它们都设置了 Angular2 类( ng-touched 、 ng-invalid 等...)，这告诉我它们是 Angular2 控件。然而，问题是它们从未设置为 ng-valid并始终保持ng-invalid即使输入值为99/99/9999根据以下正则表达式网站，这是一个有效的匹配:

1. regexpal.com
2. regexr.com

有趣的是，ng-untouched和ng-pristine当文本框接收或失去焦点时，请更新到正确的类。那么我在这里缺少什么？为什么输入模式更改不会将 css 类更新为 ng-valid ？这是我提到的 plunkr:https://plnkr.co/edit/kW861I8OdnO9iR0328KP?p=preview

更新

如果这些文本框中的任何一个放置在 <my-app> 之外又名根元素，它们工作得很好，浏览器验证似乎识别出该模式是有效的。我已将 plunkr 更新为 txt 4 .

Answer 1

Plunker 使用旧的表单模块(尝试了一些解决方法 - 没有帮助)，我已经检查了新模块 - 它可以工作。检查官方文档并添加以下内容:

    bootstrap(Application, [
    ...
    disableDeprecatedForms(),
    provideForms(),
    ...
    ]);