使用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）。 因此，根据用户选择的选项卡，如果未输入该选项卡的正确信息，则用户应该会看到错误。 我将如何使用角度显示呢？

例如。 控制器代码...

$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 ，其中包含详细说明和示例。

另外这个文档必须阅读！

如果要为必填字段设置边框颜色，请参考此内容 。 您可以对ng-required字段使用ng-invalid类