加载验证

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

Angular仅使用ng-model指令评估输入：

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

请参阅this working jsfiddle