javascript - 使用 AngularJS 显示表单验证错误

Question

这是我当前的 html 代码:

<div class="form-group" ng-class="{ 'has-error' : form.inputName.$invalid && !form.inputName.$pristine }">
    <label for="inputName" class="col-sm-4 control-label"><font color='RED'>* </font>Name</label>
    <div class="col-sm-8">
        <input type="text" class="form-control" ng-model="name" name="inputName" id="inputName" placeholder="Enter in a name." required />
        <p ng-show="form.form.$invalid && !form.form.$pristine" class="help-block">Name is required.</p>
    </div>
</div>

现在，这对于任何情况下必填的字段都适用。

但是，假设用户可以选择“发型”等选项卡，并且必须描述颜色字段和长度字段。如果这些字段为空，则显示一条小消息(如 ng-show)。因此，根据用户选择的任何选项卡，如果未输入该选项卡的正确信息，用户应该会看到错误。我将如何使用 Angular 来显示它？

例如。 Controller 代码...

$scope.someButtonPressed = function() {
    if ($scope.color == "") {
        // display ng-show for color
        // input field should have a red border to it
    }
}

这是我从以下位置获取 html 错误验证代码: http://codepen.io/sevilayha/pen/xFcdI

Answer 1

您应该引用https://scotch.io/tutorials/angularjs-form-validation其中有详细的解释和示例。

还有这个doc必须阅读!!

如果您想为必填字段设置边框颜色，请引用 this 。您可以将 ng-invalid 类用于 ng-required 字段