Показать сообщение проверки на стороне сервера в md-input-container материала angularjs с ng-сообщениями - PullRequest
Новая
       12

Показать сообщение проверки на стороне сервера в md-input-container материала angularjs с ng-сообщениями

0 голосов
/ 26 июня 2018

У меня есть форма с некоторыми входами, которые находятся в md-input-container. У каждого входа есть сообщение для проверки с директивой ng-messages: 

<form name="ctrl.myForm" layout="column" ng-submit="addUser(model)">

    <input hide type="submit" />
    <div layout="column" layout-padding>

        <md-input-container> 
            <label translate>Username</label>
            <input name="username" ng-model="model.username" type="text" required>
            <div ng-messages="ctrl.myForm.username.$error">
                <div ng-message="required" translate>This field is required.</div>
                <div ng-message="unique" translate>Username is used before.</div>
            </div>
        </md-input-container>

        <md-input-container> 
            <label translate>Email</label>
            <input name="email" ng-model="model.email" required>
            <div ng-messages="ctrl.myForm.email.$error">
                <div ng-message="required" translate>This field is required.</div>
                <div ng-message="email" translate>Email is not valid.</div>
            </div>
        </md-input-container>

    </div>

    <div layout="row">
        <span flex></span>
        <md-button 
            class="md-raised"
            ng-click="cancel()">
            <wb-icon>close</wb-icon>
            <span translate>Cancel</span>
        </md-button>
        <md-button 
            class="md-raised"
            ng-click="addUser(model)">
            <wb-icon>done</wb-icon>
            <span translate>Add</span>
        </md-button>
    </div>

</form>

В моем контроллере есть функция с именем addUser (модель), которая отправляет данные на сервер и получает несколько проверочных кодов. Я установил соответствующие ключи в объектах $ error, но относительные сообщения не отображаются. Если я получаю ошибку от сервера, я устанавливаю ключи следующим образом: 

function addUser(model){
    $myService.newUser(model)//
    .then(function(user) {
        // user is created successfully.
    }, function(error) {
        ctrl.myForm.$invalid = true;
        ctrl.myForm.username.$error['unique'] = true;
        ctrl.myForm.email.$error['email'] = true;
    });
}

Я ожидаю, когда я установлю ключи, так как истинные связанные сообщения появляются в форме, но сообщения не отображаются. В это время, если я изменяю значение поля, отображается сообщение, связанное с этим полем! Я не смог найти проблему.

1 Ответ

0 голосов
/ 27 июня 2018

Читайте здесь https://docs.angularjs.org/guide/forms о $asyncValidators, также есть несколько примеров. (ctrl.$asyncValidators.username=... и т. Д.)

В двух словах:

Встроенная проверка Angularjs требует от вас написания и добавления валидаторов. Вы не должны контролировать поля $invalid, $error вручную (поэтому они имеют префикс $). Материал Angularjs также следует этому подходу.

P.S. Причина, по которой строки типа ctrl.myForm.$invalid = true; не будут работать согласованно, довольно проста - при следующем запуске angularjs будет возвращено значение false

...