javascript - Angular 1 : How to reflect ng-model errors on another element?

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>

但是没有看到那里的类(class)..

有更好的方法吗？

Answer 1

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

我为你做了一个plunker。 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 对象的对象。然后我们可以在 ng-class 中使用 $invalid 或 $valid 属性。

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