html - Dart Polymer表单字段未显示验证错误

Question

我有类似于此示例的代码，可以与使用AngularJS的单页应用程序很好地协同工作。我想使用Dart和Dart-Polymer升级页面。

在HTML5 AngularJS版本中，默认情况下会验证HTML类型。因此，在填写表单时，可以使用type =“email”，type =“url”，type =“date”等输入验证错误。

我基于Dart Polymer教程形式的类和标记创建了以下示例:

Get Input from a Form教程

看一下下面的字段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条目，并在表单输入字段周围带有一个红色框。

如果DART Polymer的默认行为是不突出显示或验证字段，则为:

如何打开此功能？

我需要带有Polymer的标签吗？这是预期的行为吗？

如果失败，是否存在通常用于匹配HTML5验证的解决方法或仿真模式？

AngularJS版本中的相同代码段是:

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

无效的输入将用红色框突出显示URL输入。

我应该解释这个问题的目的是检查表单输入上的Dart Polymer，AngularJS和HTML5之间的兼容性和区别。当然，还要了解使事情步入正轨的各种选择。

提前致谢。

也可以看看:

How do I use HTML5 validations on dart polymer elements?

Answer 1

我进行了一些测试，并体验到:验证仅在提交表单时发生。因此，输入周围需要<form>标记。

然后，在常规情况和自定义元素中都会进行验证。也许angular添加了一些特殊的验证功能？

即使在两种情况下都无需提交表单，也可以添加此项:

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

问候
罗伯特