AngularJs & Bootstrap 3：表单验证和必填字段

Question

在这里使用 angularjs 1.3 和 Bootstrap 3。

我正在尝试验证必填字段的表单。我添加了 html5 "required" 属性。我还添加了 ng-class 来突出显示错误，但问题是当表单加载我的输入字段时，即 texbox 已经突出显示。我正在寻找的是在单击按钮时突出显示文本框。我是否必须手动检查并显示错误？

我使用下面的代码：

  <div class="m-grid-col-lg-10" 
       ng-class="{ 'has-error': nameForm.userName.$invalid }">
      <input type="text" name="userName" required ng-model="userName"
             class="form-control input-lg input-small" />
  </div>

按钮点击：

<button class="btn btn-primary" type="button"
        ng-click="done(nameForm.$valid)">
    Done
</button>

JSController代码：

 $scope.done = function (isValid) {
        if (isValid) {
            $modalInstance.close();
        }
        else {
            return false;
        }
    };

这是一个 jsfiddle：

http://jsfiddle.net/aman1981/a0cLtnpr/7/

Answer 1

'has-error': nameForm.userName.$invalid && nameForm.userName.$touched

这样 has-error 只有在无效和被触及时才会发生，你也可以做或形成。$submitted 如果你想在提交时触发 incase 他们甚至没有触及它。

已更新：

'has-error': nameForm.userName.$invalid && (nameForm.userName.$touched || nameForm.$submitted)

AngularJs & Bootstrap 3：表单验证和必填字段

AngularJs & Bootstrap3: Form validation & required field

angularjs

angular-ui-bootstrap

twitter-bootstrap-3