I am currently working on a simple app that retrieves website content from a CMS [Umbraco]. After making an Ajax call, the form comes back to me as plain HTML. I then append the form to the page and use the Angular $compile service to compile the result. The model bindings and form validation work properly, as the "ng-disabled" directive responds to user input and correctly controls the submit button's enabled status while updating the model values accordingly. However, the validation messages do not seem to be functioning as expected.
I have attempted to implement solutions found in the following links:
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 incorporating ngMessages for form validation, but encountered the same issue.
Here is 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 code (trimmed 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 using "$scope.apply()" at different points in the code without success.
N.B. - Everything functions correctly when the form is placed within the local view.
Therefore, my inquiry is as follows: how can I ensure that the validation messages work properly when loading the form from an external source?
Thank you!
**Edit: Fixed formatting