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>

仅在Angularjs

2 个答案: