在克隆HTML元素用于表单时，我收到了相同的错误。

(我有一个部分完整的表单，其中有一个模板注入其中，然后模板被修改)

错误是引用原始字段，而不是克隆版本。

我找不到任何方法可以在运行验证之前强制表单重新计算自身(希望它能摆脱对现在不存在的旧字段的任何引用)。

为了解决这个问题，我从原始元素中删除了必需的属性，并在将其注入表单之前动态地将其添加到克隆字段中。表单现在正确地验证克隆和修改的字段。

奇怪的是，每个人都建议删除验证，而验证的存在是有原因的…… 不管怎样，如果你在使用一个自定义控件，并且想要维护验证，你可以这样做:

第一步。从输入中删除无显示，因此输入变得可聚焦

.input[required], .textarea[required] {
    display: inline-block !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: -1 !important;
    position: absolute !important;
}

第二步骤。如果样式不够，则在特定情况下的输入上添加无效事件处理程序

inputEl.addEventListener('invalid', function(e){
   //if it's valid, cancel the event
   if(e.target.value) {
       e.preventDefault();
   }
}); 

对于Angular来说:

ng-required =“布尔”

如果值为true，这将只应用html5 'required'属性。

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />

不仅仅是在其他答案中提到的必填项。这也是由于将<input>字段放置在隐藏的<div>中导致的，该字段持有无效值。

考虑下面的例子，

<div style="display:none;">
   <input type="number" name="some" min="1" max="50" value="0">
</div> 

这将抛出相同的错误。所以确保<input>字段隐藏<div>不持有任何无效值。

是的. .如果隐藏表单控件有必填字段，则会显示此错误。一种解决方案是禁用此表单控件。这是因为通常如果你隐藏一个表单控件，那是因为你不关心它的值。所以这个表单控件的名称值对在提交表单时不会被发送。

它可以是你有隐藏(display: none)字段和必需的属性。

请检查所有必填字段是否对用户可见:)