Angular w/Typescript Validierungsnachrichten, die für ein in die Seite injiziertes HTML-Formular nicht ein-/ausgeblendet werden

Question

Ich entwickle eine ziemlich einfache App, die Website-Inhalte von einem CMS [Umbraco] bezieht. Das Formular kommt nach einem Ajax-Aufruf als einfaches HTML zu mir zurück. Das Formular wird dann an die Seite angehängt, und das Ergebnis wird mit dem Dienst Angular $ compile kompiliert. Die Modellbindungen und die Validierung auf dem Formular funktionieren, da die Anweisung "ng-disabled" auf die Benutzereingabe reagiert und den aktivierten Status des Übergabeknopfs korrekt steuert und die Modellwerte entsprechend aktualisiert werden. Die Überprüfungsmeldungen sind jedoch nicht betroffen.

Ich habe versucht, die Lösungen in der folgenden umzusetzen:

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)

ich auch ngMessages für die Formular-Validierung zu verwenden versucht. Das Ergebnis war das gleiche.

Der (vereinfachte) Form in Frage:

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

die zugehörige Steuerung (abgespeckte):

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

Ich habe versucht, "$ scope.apply()" an verschiedenen Orten zu verwenden, im gesamten Code.

N.B. - Alles funktioniert wie erwartet, wenn das Formular lokal in der Ansicht platziert wird.

Also meine Frage ist die folgende: Wie kann ich die Validierungsnachrichten arbeiten, wenn das Formular von einer externen Quelle geladen wird?

Vielen Dank!

** Edit: Feste Formatierung

Answer 1

Es gibt ein Problem mit der Kompilierung Dienst in der Basisklasse zu sein. Das Einfügen in die abgeleitete Klasse scheint es stattdessen behoben zu haben.