Dart Polymer表單字段未顯示驗證錯誤

Question

我有類似於此示例的代碼，可以與使用AngularJS的單頁應用程序很好地配合使用。 我想使用Dart和Dart-Polymer升級頁面。

在HTML5 AngularJS版本中，默認情況下會驗證HTML類型。 因此，在填寫表單時，可以使用type =“ email”，type =“ url”，type =“ date”等輸入驗證錯誤。

我將以下示例基於Dart Polymer教程形式的類和標記：

• 從表單教程獲取輸入

看一下下面的字段theData [' authorUrl ']。

<polymer-element name="reference-form" extends="form" >
  <template>
    <style> ... </style>
    <div id="slambookform"  >
         :
      <div class="entry">
        <label>URL:</label>
        <input type="url" value="{{theData['authorUrl']}}">
      </div>
         :
    </div>
  <template>
</polymer-element>

不突出顯示無效語法的URL字段。 而使用帶有HTML標記的AngularJS的相同字段的一致版本會顯示無效的URL條目，並在表單輸入字段周圍帶有一個紅色框。

1. 如果不突出顯示或驗證字段是Dart Polymer的默認行為：
   • 我如何啟用此功能？
2. 我需要聚合物標簽嗎？ 這是預期的行為嗎？
3. 如果失敗，是否存在通常用於匹配HTML5驗證的解決方法或仿真模式？

AngularJS版本中的相同代碼段是：

<form>
      :
    <label>URL:</label>
    <input type="url" data-ng-model="authorUrl"/>
      :
</form>

無效的輸入將用紅色框突出顯示URL輸入。

我應該解釋這個問題的目的是檢查表單輸入上的Dart Polymer，AngularJS和HTML5之間的兼容性和差異。 當然，要了解使事情步入正軌的選擇。

提前致謝。

另請參閱 ：

• 如何在飛鏢聚合物元素上使用HTML5驗證？

Answer 1

我做了一點測試，並經歷了這一點：驗證僅在提交表單時發生。 因此，輸入周圍需要<form>標記。

然后，在常規情況和自定義元素中都會進行驗證。 也許angular添加了一些特殊的驗證功能？

即使在兩種情況下都無需提交表單，也可以添加此項：

<style>
  input:invalid {
    border: 1px solid #900;
  }
</style>

問候羅伯特