Проверка Angularjs и выделение ввода внутри ng-repeat - PullRequest
0 голосов
/ 16 мая 2019

Используя angularjs здесь.У меня есть таблица, где при использовании добавляет динамические строки, состоящие из 2 входных текста при нажатии кнопки (+).Как только они закончат добавление строк на кнопке «Готово» (отправить), я хочу проверить входные данные.Я вижу, что моя проверка запускается нормально, но она не выделяет строку с ошибкой.Вот мой код:

 <table class="table table-borderless" ng-if="options.length>0">      
        <thead>
            <tr>
                <td class="bold">Key</td>
                <td class="bold">Value</td>
            </tr>
        </thead>
        <tbody style="border: none;">
            <tr ng-repeat="m in options">
                <td ng-class="{ 'has-error': paramForm['ctrlKey_' + {{$index}}].$invalid && (paramForm['ctrlValue_' + {{$index}}].$touched || paramForm.$submitted) }">
                    <input type="text" name="ctrlKey_{{$index}}" class="form-control" ng-model="m.optionText" required />                        
                </td>
                <td>
                    <input type="text" class="form-control" ng-model="m.optionValue" required />
                </td>
                <td>
                    <a class="btn btn-xs" ng-click="Remove($index)"><i class="glyphicon glyphicon-trash"></i></a>
                </td>
            </tr>
        </tbody>
    </table>

Я думал, что добавление строки ниже сделает мой TD выделенным красным, но это не работает.

ng-class="{ 'has-error': paramForm['ctrlKey_' + {{$index}}].$invalid && (paramForm['ctrlValue_' + {{$index}}].$touched || paramForm.$submitted) }"

Что-то здесь отсутствует?

Обновлено:

Я создал jsfiddle: http://jsfiddle.net/aman1981/uk21soj6/11/

Ответы [ 2 ]

1 голос
/ 20 мая 2019

Сначала переместите кнопки внутри формы.

Во-вторых, имя входа, которое вы определили, не совпадает с тем, которое используется в TD ng-классе

Исправьте это и дайте знать.

0 голосов
/ 17 мая 2019

Они добавили новую функцию в HTML5, которая выполняет проверку ввода. Вы просто добавляете следующее к любому входному тегу:

<input required>

Документация и пример

https://www.wufoo.com/html5/required-attribute/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...