AngularJS clientseitige Validierung in Direktive

Question

Ich verwende eine Direktive, um ein Teilformular einzukapseln. Es gibt eine umschließende Form, die die Modellwerte in die Direktive übergibt. Hier ist das Grundlayout:

<form name="userForm" class="form-horizontal" ng-submit="vm.onSubmitForm(userForm.$valid)" novalidate> 

<fieldset> 
    <legend>Account</legend> 

    <div class="form-group" control-validator="" validator-condition="vm.hasTriedToSubmit"> 
     <label class="col-md-2 control-label">Email (username):</label> 
     <div class="col-md-10"> 
      <input class="form-control" type="email" 
        id="email" name="email" 
        placeholder="Email" 
        required 
        ng-model="vm.formData.email"> 
      <control-validator-message>Email is required.</control-validator-message> 
     </div> 
    </div> 

    <!-- some other fields --> 

    <div ng-if="vm.isUserChecked()"> 
     <!-- directive which is rendered conditionally --> 
     <dt-user user="vm.user" display-name-fields="false"></dt-user> 
    </div> 

</fieldset> 

So ist die Idee, dass, wenn der Benutzer Richtlinie wiedergegeben wird, werden einige der Felder erforderlich. Das funktioniert tatsächlich wie es ist, aber ich bekomme die Validierungsnachricht nicht angezeigt, noch bekomme ich das Fehler-CSS auf die erforderlichen Felder angewendet. Ich bin angehalten, das Formular zu senden, wenn ein erforderliches Direktivenfeld nicht vorhanden ist, und die Felder in den regulären Teilen des Formulars zeigen die Nachrichten und das Fehler-CSS, aber ich habe kein Glück mit denen in der Direktive. Im Grunde brauche ich einen Weg, um die umschließende Form von der Direktive zu signalisieren, um die Validierung auszulösen.

Answer 1

Ich denke, das Problem, das Sie haben, ist nicht die Validierung, aber wann die Fehler von der Validierung zeigen, richtig? Hier ist ein kleines Beispiel dafür, wie ich das gemacht habe

Answer 2

Das Problem war ein Fehler im Bereich. Die Validator-Bedingung "vm.hasTriedToSubmit" war Teil des äußeren Controllers, nicht des Controllers der Direktive. Ich habe meine Bereichsschnittstelle so geändert, dass sie diesen Wert enthält, sie dem Bereichsinitialisierer in der Direktive hinzugefügt und ihn dort übergeben, wo die Anweisung verwendet wird.

Die Schnittstelle:

export interface IUserScope extends ng.IScope { 
user: UserViewModel; 
hasTriedToSubmit: boolean; 
displayNameFields: boolean; } 

Die Richtlinie:

var userDirectiveArray = [ 
    (): ng.IDirective => ({ 
     restrict: "E", 
     replace: true, 
     scope: { 
      user: '=', 
      hasTriedToSubmit: '=', 
      displayNameFields: '=' 
     }, 
     templateUrl: "/path/user.directive.tpl.html", 
     controllerAs: 'vm', 
     controller: UserDirectiveController 
    }) 
]; 

Mit der Richtlinie:

<dt-user user="vm.formData" has-tried-to-submit="vm.hasTriedToSubmit" display-name-fields="true"></dt-user> 

Einige Kontrollen passieren, während eine Vorlage versucht wird, das ist, wo die „vm .hasTriedToSubmit "value wird verwendet. Es wurde auf dem äußeren Controller ausgewertet, aber in der Direktive war es einfach auf "false" gesetzt, so dass mein Fehler-Feedback nicht angezeigt wurde.