Nick Er Ответов: 2

Как отобразить сообщение об ошибке в таблице после проверки ввода (angular JS)

Привет,
абзац, показывающий сообщение об ошибке, не будет отображаться, я использую ng-if,
Я хотел бы, чтобы абзац появлялся ниже моего текстового поля ввода, когда текстовое поле пустое или слишком короткое.


<form class="form-horizontal" role="form" name="editForm" novalidate>
    <div>
        <table>
            <tbody>
                <tr ng-repeat="testing in $data">
                    <td data-title="'Name'">
                        <div>
                            <input type="text" class="f-control" name="name" ng-model="testing.name" placeholder="Name" required ng-minlength="2" ng-maxlength="10">
                            <p class="help" ng-if="editForm.name.$error.required">Name is required</p>
                            <p class="help" ng-if="editForm.name.$error.minlength">Too Short</p>
                            <p class="help" ng-if="editForm.name.$error.maxlength">Too Long</p>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</form>


Что я уже пробовал:

Я застрял здесь, неужели мне чего-то не хватает?

Karthik_Mahalingam

angular.io ?

2 Ответов

Рейтинг:
2

Setyo Margono

попробуй вот так

изменить форму, как НГ-формы и поставить в ТР такой

<tr ng-repeat="testing in $data "  name="editForm"  ng-form >




</tr>


надеюсь, это поможет

с уважением,
йо-йо

Рейтинг:
0

Karthik_Mahalingam

попробуй это, маленький хитрец :) 

<!DOCTYPE html>
<html lang="en-US">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    
    <script>
        var app = angular.module('myapp', []);
        app.controller('myctrl', myfun);
     

        function myfun($scope) {
            $scope.$data = [{ name: 'helicopter' }, { name: 'Aeroplane' }, { name: 'professional Team' }];
            $scope.isMax = function (index) {
                return $scope.editForm['name' + index].$error.maxlength;
            }
        }

    </script>


</head>
<body ng-controller="myctrl" ng-app="myapp">

    <form ng-controller="myctrl" ng-app="myapp"   class="form-horizontal" role="form" name="editForm" novalidate>
        <div>
            <table>
                <tbody>
                    <tr ng-repeat="testing in $data">
                        <td data-title="'Name'">
                            <div>
                                <input type="text" class="f-control" name="{{'name' + $index }}" ng-model="testing.name" placeholder="Name" required ng-minlength="2" ng-maxlength="10">
                                <b ng-show="isMax($index)"> Too Long</b>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</body>
</html>