负载验证

Question

我有一个带有输入框的简单表单。

​

angular.module('main', [])
  .controller('Ctrl', ['$scope', '$location',
    function($scope, $location) {

    }
  ]);

.red-border {
  border-color: red;
}

<div ng-app="main">
  <div ng-controller="Ctrl">
    <form name="frm" novalidate="novalidate">
      <input type="text" required name="myname" ng-class="{'red-border':frm.myname.$error.$invalid}" />
      <br>{{frm | json}}
    </form>
  </div>
</div>

​

我需要输入框在开始的红色边框，因为它已经是空的，但它不会使它在加载红色。当我像这样测试它：ng-class="{'red-box':true}"时，它确实工作。

在一开始就启动它的最佳实践是什么，还是我必须做所有的解决办法？

谢谢

编辑：

这是我的代码片段。https://jsfiddle.net/Ingeeg/afm7rhsw/8/

Answer 1

角只使用ng-model指令计算输入：

<form name="frm" novalidate="novalidate">
    <input type="text" required name="myname"
           ng-model="myModel"
           ng-class="{'red-border':frm.myname.$invalid}" />
</form>

请参阅这个工作上的小把戏