Question

我的代码与此示例类似，使用AngularJS与单页应用程序配合得很好。我想使用Dart和Dart-Polymer来升级页面。

在HTML5 AngularJS版本中，默认情况下会验证HTML类型。因此，在填写表单时，键入=＆＃34; email＆＃34;，type =＆＃34; url＆＃34;，type =＆＃34; date＆＃34;等工作并提供验证错误。

我基于Dart Polymer教程中的类和标记基于以下示例：

Get Input from a Form教程

请查看下面的数据[＆＃39; authorUrl ＆＃39;]。

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

如果NOT突出显示或验证字段是默认的Dart Polymer行为：
- 我怎样才能开启＆＃39;这个功能？
我需要聚合物标签吗？这是预期的行为吗？
如果失败，是否存在通常用于匹配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>

此致罗伯特

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

1 个答案: