Question

我已经制作了一个自定义指令来进行输入验证，现在该指令在大多数情况下都能正常工作，但我这样做的方法是在用ctrl.$setValidity('validation', false);检查字段之前使字段无效然后验证字段如果它有效，请将其$setValidity更改为true。但我的问题是当我在我的指令中使用onBlur事件时，因为我在开始输入时使字段无效并变得很脏而且显示无效，即使我只是想在onBlur之后它无效，所以我发现最好的方法是使表单无效而不是每个字段。

为了使它变短，如何找到输入元素的父形式并将其设置为无效？

当知道表单名称时，我知道我可以这样做scope.myFormName.$setValidity('validation', false);并且它有效，但我试图通用并自己找到表单对象然后使其无效。我试图用elm.parent()循环，但还没有太大的成功......而且我试图保持尽可能通用，所以使用jqLite。

的修改
我有一些代码工作，但它不是完全干净的代码，有没有人有更好的方法？

var j = 0;
var parentElm = elm.parent();
var parentFormElm = null;
do {
  if(parentElm.prop('tagName').toUpperCase() === "FORM") {
    parentFormElm = parentElm;
    break;
  }      
  parentElm = parentElm.parent(); // next parent
}while(parentElm !== "form" && j++ < 50);

scope[parentFormElm.prop('name')].$setValidity('validation', false);

Answer 1

因为它只是造型的问题（如评论中所指出的），你可以调整Angular的CSS类，这样输入字段只有在没有聚焦时才会突出显示：

.ng-invalid.ng-dirty:not(:focus) {
  background-color: #ff7373;
}

Plunker

如果你不能使用CSS3选择器，那么你需要两个CSS类：

.ng-invalid.ng-dirty {
  background-color: #ff7373;
}

.ng-invalid.ng-dirty:focus {
  background-color: #fff;
}

Plunker

从输入的自定义指令如何使父表单无效？

1 个答案: