仅当在Angularjs中验证失败时才显示ng-message内容

Question

我在网上找到了一些用于简单登录表单的自定义代码：

<div class="col-md-6 col-md-offset-3">
    <h2>Login</h2>
    <form name="form" ng-submit="form.$valid && vm.login()" novalidate>
        <div class="form-group" ng-class="{ 'has-error': form.$submitted && form.username.$invalid }">
            <label for="username">Username</label>
            <input type="text" name="username" class="form-control" ng-model="vm.username" required />
            <div ng-messages="form.$submitted && form.username.$error" class="help-block">
                <div ng-message="required">Username is required</div>
            </div>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.$submitted && form.password.$invalid }">
            <label for="password">Password</label>
            <input type="password" name="password" class="form-control" ng-model="vm.password" required />
            <div ng-messages="form.$submitted && form.password.$error" class="help-block">
                <div ng-message="required">Password is required</div>
            </div>
        </div>
        <div class="form-group">
            <button class="btn btn-primary">Login</button>
        </div>
        <div ng-if="vm.error" class="alert alert-danger">{{vm.error}}</div>
    </form>
</div>

当前，具有以下内容的ng-messages：“需要用户名”和“需要密码”始终可见。 我是否有可能以仅在身份验证失败时才能看到消息的方式更改此代码？

或者换句话说，我可以将它们隐藏在HTML中，因为我想我必须通过有角度的代码来显示它们。

Answer 1

在div上设置ng-if ，检查错误：

ng-if="form.password.$error"
ng-if="form.username.$error"

这将确保div仅显示表单中是否存在特定于这些元素的错误。

Answer 2

您可以使用FormController.$dirty或FormController.$pristine

通过Angular Docs：

$ pristine：如果用户尚未与表单交互，则为true。

$ dirty：如果用户已经与表单交互，则为true。

<div ng-if="form.$dirty && vm.error" class="alert alert-danger">{{vm.error}}</div>