Angular w/ Typescript Validation messages not showing / hiding for a HTML form injected into the page

Question

I'm developing a rather simple app, which pulls website content from a CMS [Umbraco]. The form comes back to me as plain html after an Ajax call. The form is then appended to the page, and the result is compiled using the Angular $compile service. The model bindings and the validation on the form work, since the "ng-disabled" directive responds to the user input and correctly controls the submit button's enabled status, and the model values are updated accordingly. However the validation messages are unaffected.

I have tried to implement the solutions in the following:

Form Validation and fields added with $compile
Angularjs: form validation and input directive
How to validate inputs dynamically created using ng-repeat, ng-show (angular)

I also tried to use ngMessages for the form validation. The result was the same.

The (simplified) form in question:

<form id="registration-form"
      name="registrationForm"
      ng-submit="onRegistrationFormSubmit()"
      novalidate>

        <label for="registration-name">NAME:</label>
        <input id="registration-name"
               name="registrationName"
               class="form-control"
               type="text"
               placeholder="Name"
               ng-model="registrationModel.Name"
               ng-required="true" />

        <span ng-show="registrationForm.$submitted || registrationForm.registrationName.$touched>
            <span class="error errorCol" ng-show="registrationForm.registrationName.$error.required">Required</span>
        </span>
</form>

The associated controller (stripped down):

   declare var sampleModule: ng.IModule;

    module RegistrationModule {
        "use strict";

        export interface IRegistrationScope extends ng.IScope {
            registrationModel: IRegistrationModel;
            registrationForm: ng.IFormController;
            pageContent: string;

            onRegistrationFormSubmit(): void;
        }

        export class RegistrationController extends BaseModule.BaseController {

            static $inject = ["$scope", "RegistrationService"];

            constructor(scope: IRegistrationScope, registrationService: IRegistrationService) {
                super();

                function initialiseRegistrationModel() {
                    scope.registrationModel = {
                        Name: "",
                        Email: "",
                        Code: null
                    };
                }

                function init() {
                    initialiseRegistrationModel();
                }

                init();

                var registrationContentPromise = super.contentService().getRegistrationPageContent().then(
                    (r: ng.IHttpPromiseCallbackArg<string>) => {
                        scope.pageContent = r.data;
                        return null;
                    }
                )
                    .then(
                    () => {
                        var appendResult = $("#page-content").append(scope.pageContent);
                        super.compile()(appendResult)(scope);

                        return null;
                    }
                    );
            }
        }
    }
    sampleModule.controller("RegistrationController", RegistrationModule.RegistrationController);

I have tried to use "$scope.apply()" in various locations throughout the code.

N.B. - Everything works as expected if the form is placed inside the view locally.

So, my question is the following: how can I make the validation messages work, when the form is being loaded from an external source?

Many thanks!

**Edit: Fixed formatting

John Lay John Lay · Accepted Answer · 2016-05-25T15:20:35

There is an issue with the compile service being in the base class. Injecting it in the derived class instead seems to have fixed it.

Angular w/ Typescript Validation messages not showing / hiding for a HTML form injected into the page

1 Answers