angular2，爲什麼這個html5驗證不能在ngForm中工作

我創建了一個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根據以下的正則表達式的網站這是一種有效匹配：angular2，爲什麼這個html5驗證不能在ngForm中工作

有趣，當文本框收到或失去焦點時，ng-untouched和ng-pristine會更新爲適當的類。那麼我在這裏錯過了什麼？爲什麼輸入模式更改不會將css類更新爲ng-valid？這是我提到的plunkr：https://plnkr.co/edit/kW861I8OdnO9iR0328KP?p=preview

更新

如果這些文本框放置在<my-app>外又名根元素，他們的工作只是罰款和瀏覽器驗證似乎認識到了模式有效。我用txt 4更新了plunkr。

來源

2016-08-02 RoninCoder

試試看http://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html – rashfmnb

@rashfmnb這是聲明式的方法，我的解決方案是使用html5驗證構建的。這比幾個文本框要複雜得多，我用這個來證明這個問題。它在一些地方有效，但不是在上述情況下，所以不太確定它應該如何表現。 – RoninCoder

其實我也嘗試在開始時使用文本框，但最終以上面的鏈接認爲它不被角度支持，現在可能會在最終版本中發佈。我把你的問題標記爲最喜歡的，所以我可能得到一些人的啓發回答 – rashfmnb

Plunker使用舊的表單模塊（嘗試了幾個解決方法 - 沒有幫助），我用新模塊檢查過 - 它的工作原理。檢查的官方文檔，並添加以下內容：

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

來源

2016-08-02 21:57:10 kemsky

我正在設立一個新的虛擬項目，嘗試新的RC.4，因爲我有一種預感，情況就是這樣。不幸的是，我使用了'AnimationBuilder'和css轉換，它似乎在RC.4中消失了，因此無法升級到那個版本。只有當這個班級可用時纔有希望。 – RoninCoder

angular2，爲什麼這個html5驗證不能在ngForm中工作

回答

相關問題