ng-show验证消息的不同外观

Question

我试图将我的ng-show验证消息显示为不同的样式。

这是我的代码：

    <div class="form-group" ng-class="{ 'has-error': form.email.$dirty && form.email.$error.required }">
        <label for="email">E-Mail</label>
        <input type="email" name="email" id="Text1" class="form-control" ng-model="vm.user.email" required />
        <span ng-show="form.email.$dirty && form.email.$error.email" class="help-block">E-Mail format incorrect</span>
        <span ng-show="form.email.$dirty && form.email.$error.required" class="help-block">E-Mail is required</span>
    </div>

验证消息的不同样式：

不要为空

具有正确的格式

两种情况都可以采用相同的风格吗？

非常感谢您的建议。

Answer 1

替换

'has-error': ... && form.email.$error.required

，如果表单字段因has-error验证程序而无效，则仅设置required类

'has-error': ... && form.email.$invalid

如果表单字段无效，则设置has-error类，无论原因是什么。