AngularJS custom form controls validation

Question

I'm having issues with validating custom form controls in AngularJS.

The two issues are:

I want to trigger a custom error when the placeholder/initial text has not been modified within the content editable field. I've tried various approaches -- but with no luck (including trying to edit $isValid).
Solved: I can't seem to trigger the ng-show on the error messages to make them appear when ng-minlength, ng-maxlength, and ng-required are invalid. ( Answer: I didn't have a name attr on the div)

Please see the Plnkr below, and code samples:

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);

You don't have an input named standfirst anywhere on the form. — ryanyuyu
– ryanyuyu, Commented May 5, 2016 at 21:24
Also, what is this directive supposed to be doing? It's not really clear. — ryanyuyu
– ryanyuyu, Commented May 5, 2016 at 21:25
@ryanyuyu the directive was just boilerplate from an example of custom form components in the angular documentation. I've amended my question after your comments — David
– David, Commented May 5, 2016 at 21:27

Simon Schüpbach · Accepted Answer · 2016-05-05 22:11:57Z

1

You can use $pristine to check if input value is changed.

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

Because you set a value at startup in your directive you have to reset the form. To do so add ctrl.$setPristine() to your code

// load init value from DOM
ctrl.$setViewValue(elm.html());
ctrl.$setPristine();

answered May 5, 2016 at 22:11

Simon Schüpbach

2,6833 gold badges15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Over a year ago

Then I would use the $pristine check on the ng-disabled of the submit button? To prevent an invalid submission..

Simon Schüpbach Over a year ago

You can use $valid to prevent an invalid submission. But to prevent an unchanged submit you can use $pristine. I always make the check inside the ng-disable attribute, but you can do it inside the submit function as well.

Collectives™ on Stack Overflow

AngularJS custom form controls validation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related