Question

在此处使用angularjs 1.3和Bootstrap 3。

我正在尝试验证我的表格是否为必填字段。我添加了html5“必需”属性。我还添加了ng-class来突出显示错误，但问题是当表单加载我的输入字段时，即texbox已被突出显示。我要寻找的是在单击按钮时突出显示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才会发生，您也可以执行或形成表单。如果您想在提交时触发，以防万一他们没有触摸，则提交$。

已更新：

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

AngularJs和Bootstrap3：表单验证和必填字段

1 个答案: