1

I have a form with nested ng-forms where on each key press user make script append a compiled form fields (like ui-select, ui-datepicker, etc.) to container with ng-form directive.

How can I trigger validation after content is replaced in ng-form?

EDIT:

Below directive for appending fields into preview:

var previewDirective = function ($compile) {

    var link = function ($scope, $el, $attrs) {
        var previewField = $('.preview');

        var fields = {
            date: '<div class="datepicker-wrap" ng-controller="DatepickerCtrl"><button type="button" class="svg--center svg__calendar-gray ngapp-svg" ng-click="open($event)" ng-class="{true: \'is-active\'}[isOpened]"></button><input type="text" class="ngapp-datepicker" ng-model="date" is-open="isOpened" datepicker-options="datepickerSettings" datepicker-popup="{{format}}" ng-focus="open($event)" ng-class="{true: \'is-active\'}[isOpened]" required></div>'
        };

        var timer = null;

        function appendInputs() {
            var $this = $(this);
            var value = this.value;

            var replaced = function () {
                var output;
                for (var prop in fields) {
                    output = value.replace(prop, fields[prop]);
                }
                return output;
            };

            clearTimeout(timer);

            timer = setTimeout(function () {
                previewField.html(replaced());
                $compile(previewField.contents())($scope);
            }, 300);
        };

        $el.on('keyup', appendInputs);
    };

    return {
        restrict: 'A',
        link: link
    }
};

Simple demo on JSFiddle

If you want to reproduce the bug, append field by typing into textarea word "date", then remove appended field value, remove word "date" from textarea and type new one to refresh date field.

Cœur
  • 37,241
  • 25
  • 195
  • 267
mirox
  • 48
  • 1
  • 9
  • Please provide some code. – trees_are_great Jun 09 '15 at 09:28
  • I have added simple demo, see editted question – mirox Jun 15 '15 at 09:52
  • Alright, I've had a look at your sample and I'm not sure what you're trying to achieve. When do you think the form should be invalid and why? – trees_are_great Jun 16 '15 at 08:15
  • Form should be invalid when fields which are at the moment in ng-form are invalid. I figured out that angular saves ng-model value and copy that value to fields that are appended to ng-form. In other words I'm using the same ng-model value for each field, but with new instance of controller. I think the problem is how to reinitialize controller with new ng-model vlaue. – mirox Jun 16 '15 at 08:30

0 Answers0