Angular1：如何在另一个元素上反映ng-model错误？

Question

我有一个带有以下模板的指令

<div>
    <span class="label">My Label</span>
    <input ng-model="name" required>
</div>

我想在输入字段无效时将标签涂成红色。

我该怎么做？

目前我有另一条指令将所有错误从ngModelCtrl同步到包装div

 <div add-all-errors>
   ... 
 </div>

指令的链接功能是这样的：

const ngmodel = $element.find('[ng-model]').controller('ngModel');
$scope.$watch(()=>ngmodel.$error, addAllClasses, true); 

addAllClasses只需确保元素上出现正确的类..

我也试过添加相同的ng-model

  <div ng-model="name">
  ...
  </div>

但没看到那里的课程..

有更好的方法吗？

Answer 1

这就是我们使用angularjs形式的原因......我真的不确定为什么人们反对使用非常方便的功能。

我为你做了一个傻瓜。 https://plnkr.co/edit/bGOcQjWzlRq2aTYZUYNm?p=preview

<form name="form">
    <span ng-class="{red: form.name.$invalid}">Name:</span>
    <input name="name" ng-model="name" required>
</form>

更多地了解正在发生的事情。 form由angularjs以其名称自动地添加到范围中。在这种情况下，我将其命名为form，但它可以是任何名称。

现在form是一个ngForm对象，并通过其名称属性将所有输入字段添加到其中。这样我们就可以form.name来获取类似于ngForm对象的另一个对象。然后，我们可以将$invalid或$valid属性与ng-class一起使用。

ngForm非常强大，并且加载了许多很酷的属性和方法。只需致电console.log(scope.form);您需要输入一个方法并将其添加到ng-change中以查看更新。