Блог

Я нашел некоторый пользовательский код в Интернете для простой формы входа:

 <div class="col-md-6 col-md-offset-3">
    <h2>Login</h2>
    <form name="form" ng-submit="form.$valid amp;amp; vm.login()" novalidate>
        <div class="form-group" ng-class="{ 'has-error': form.$submitted amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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-сообщения с содержимым: «Требуется имя пользователя» и «Требуется пароль» всегда видны.
Есть ли шанс, что я могу изменить этот код таким образом, чтобы я видел эти сообщения только при сбое аутентификации?

Или, другими словами, могу ли я скрыть их в HTML, потому что, я думаю, мне нужно показать их через угловой код.

Установите ng-if в своем div, проверяя наличие ошибок:

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

Это гарантирует, что div будет отображаться только в том случае, если в вашей форме существует ошибка, характерная для этих элементов.

Вы можете использовать FormController.$dirty или FormController.$pristine

По Angular Docs:

$ нетронутый: True, если пользователь еще не взаимодействовал с формой.

$dirty: True, если пользователь уже взаимодействовал с формой.

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