Проверка правильности формы углового материала и ошибка отображаются неправильно - PullRequest
0 голосов
/ 31 декабря 2018

Сообщения об ошибках ввода формы и записи формы не обновляются при изменении ввода.

Я попытался переключиться на форму вместо ng-формы, пробовал различные виды проверок (обязательно, электронная почта, шаблон,...) Казалось, ничего не изменилось.

Я использую Angular 1.7 Angular-Material 1.1.9 Angualr-сообщений 1,7

Эта форма находится внутри таблицы> tbody

<ng-form name="editedJiraForm">
<tr md-row ng-repeat="task in jira.tasks track by $index">
    <td md-cell>
        <md-input-container>
            <label>Title</label>
            <input name="title" ng-model="editedJira.title" required>
            <div ng-messages="editedJiraForm.title.$error" md-auto-hide="false">
                <div ng-message="required">Title required</div>
            </div>
        </md-input-container>
    </td>
    <td md-cell>
        <md-input-container>
            <label>Description</label>
            <textarea name="description" ng-model="editedJira.description" md-maxlength="5000" rows="3" md-select-on-focus required></textarea>
            <div ng-messages="editedJiraForm.description.$error" md-auto-hide="false">
                <div ng-message="required">Description required</div>
            </div>
        </md-input-container>
    </td>
    <td md-cell>
        <md-input-container>
            <label>Priority</label>
            <input name="priority" ng-model="editedJira.ubi_priority" ng-pattern="/^(01|02|03)$/"/>
            <div ng-messages="editedJiraForm.priority.$error" md-auto-hide="false">
                <div ng-message="pattern">Invalid priority</div>
            </div>
        </md-input-container>
    </td>
    <td md-cell>
        <md-input-container>
            <label>Estimation</label>
            <input name="estimation" ng-model="editedJira.estimation" ng-pattern="/^\d+(.\d+)?$/">
            <div ng-messages="editedJiraForm.estimation.$error" md-auto-hide="false">
                 <div ng-message="pattern">Invalid estimation, use int or float</div>
            </div>
        </md-input-container>
    </td>
    <td md-cell>
        <md-button ng-disabled="editedJiraForm.$invalid" class="md-fab md-primary md-mini" aria-label="validate" ng-click="editJira(selection.feature, $index, true)">
             <md-icon md-svg-src="static/images/validate.svg"></md-icon>
        </md-button>
        <md-button class="md-fab md-primary md-mini" aria-label="cancel" ng-click="editJira(selection.feature, $index)">
             <md-icon md-svg-src="static/images/cancel.svg"></md-icon>
        </md-button>
    </td>
</tr>
</ng-form>

Я ожидаю получить - сообщения, отображаемые, когда, например, приоритет не соответствует шаблону.- Аналогично, когда форма недействительна, кнопка проверки должна быть отключена.

Хотя в моем случае: - Поля ввода становятся красными, когда шаблон или требование не соблюдаются, но сообщения не отображаются.- Кнопка проверки всегда активна.

При отображении отредактированной JiraForm в html она не обновляется при редактировании формы, может быть проблема там?

1 Ответ

0 голосов
/ 09 января 2019

Хорошо, если у кого-то возникла подобная проблема, я нашел ответ от там

Это произошло из-за того, что форма была разбита на несколько частей.

Решением было удалить фактический элемент и заменить его с помощью ng-form name = "editedJiraForm" для элемента.

Это дает следующий код:

<tr ng-form name="editedJiraForm">
    <td md-cell>
        <md-input-container>
            <label>Title</label>
            <input name="title" ng-model="editedJira.title" required>
            <div ng-messages="editedJiraForm.title.$error" md-auto-hide="false">
                <div ng-message="required">Title required</div>
            </div>
        </md-input-container>
    </td>
    <td md-cell>
   ....
    </td>
</tr>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...