Пользовательская форма AngularJS контролирует проверку

У меня проблемы с проверкой пользовательских элементов управления формы в AngularJS.

Две проблемы:

  1. Я хочу вызвать пользовательскую ошибку, когда заполнитель/начальный текст не был изменен в редактируемом поле содержимого. Я пробовал разные подходы, но безуспешно (в том числе пытался отредактировать $isValid).

  2. Решено. Я не могу активировать ng-show в сообщениях об ошибках, чтобы они появлялись, когда ng-minlength, ng-maxlength и ng-required недействительны. ( Ответ: у меня не было атрибута имени в div)

См. приведенный ниже Plnkr и примеры кода:

https://plnkr.co/edit/Up6Q4D7cMDQQxCodLrpE?p=preview

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Example - example-example40-production</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="script.js"></script>
</head>

<body ng-app="form-example2">
    <form name="myForm">
        <div contentEditable="true" ng-model="standfirst" title="Click to edit" ng-required="true" ng-minlength="5" ng-maxlength="20">Some People</div>
        <p ng-show="myForm.standfirst.$error.required" class="text-danger">You did not enter a standfirst</p>
        <p ng-show="myForm.standfirst.$error.minlength" class="text-danger">Your standfirst is too short</p>
        <p ng-show="myForm.standfirst.$error.maxlength" class="text-danger">Your standfirst is too long</p>
    </form>
    <pre>model = {{content}}</pre>

    <style type="text/css">
        div[contentEditable] {
            cursor: pointer;
            background-color: #D0D0D0;
        }
    </style>
</body>

</html>

(function(angular) {
    'use strict';
    angular.module('form-example2', []).directive('contenteditable', function() {
        return {
            require: 'ngModel',
            link: function(scope, elm, attrs, ctrl) {
                // view -> model
                elm.on('blur', function() {
                    ctrl.$setViewValue(elm.html());
                });

                // model -> view
                ctrl.$render = function() {
                    elm.html(ctrl.$viewValue);
                };

                // load init value from DOM
                ctrl.$setViewValue(elm.html());
            }
        };
    });
})(window.angular);

angularjs contenteditable angularjs-forms
person David    schedule 05.05.2016    source источник
comment
У вас нет ввода с именем standfirst нигде в форме.   -  person ryanyuyu    schedule 06.05.2016
comment
Кроме того, что должна делать эта директива? Это не совсем ясно.   -  person ryanyuyu    schedule 06.05.2016
comment
@ryanyuyu директива была просто шаблоном из примера пользовательских компонентов формы в документации angular. Я изменил свой вопрос после ваших комментариев   -  person David    schedule 06.05.2016

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать $pristine, чтобы проверить, изменилось ли входное значение.

<p ng-show="myForm.standfirst.$pristine" class="text-danger">Your start error message</p>

Поскольку вы устанавливаете значение при запуске в своей директиве, вы должны сбросить форму. Для этого добавьте ctrl.$setPristine() в свой код.

// load init value from DOM
ctrl.$setViewValue(elm.html());
ctrl.$setPristine();
person Simon Schüpbach    schedule 05.05.2016
comment
Тогда я бы использовал проверку $pristine на ng-disabled кнопки отправки? Чтобы предотвратить недействительную отправку.. - person David; 06.05.2016
comment
Вы можете использовать $valid, чтобы предотвратить недопустимую отправку. Но чтобы предотвратить отправку без изменений, вы можете использовать $pristine. Я всегда делаю проверку внутри атрибута ng-disable, но вы можете сделать это и внутри функции отправки. - person Simon Schüpbach; 06.05.2016