ディレクティブのAngularJSクライアント側の検証

Question

私はディレクティブを使用して部分的なフォームをカプセル化しています。モデル値を指示文に渡す囲み形式があります。ここでは基本的なレイアウトです：

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

だから、アイデアは、ユーザの指示がレンダリングされている場合、そのフィールドのいくつかが必要とされるということです。これは実際には機能しますが、検証メッセージが表示されず、必要なフィールドにエラーCSSが適用されません。私は、必要な指示フィールドが存在しない場合、フォームの通常の部分のフィールドにメッセージとエラーCSSを表示している場合、フォームの送信を停止していますが、指示に含まれているものは不運です。基本的には、検証の引き金を引くためにディレクティブから囲むフォームに信号を送る方法が必要です。

Answer 1

私はあなたが持っている問題は検証ではないと思いますが、検証からエラーを表示するのは正しいでしょうか？ここに私がこれをした方法の小さな例があります

<div ng-controller="subCtrl"> 
    <form name="groupEdit" ng-submit="groupEditSubmit()"> 
     <input required 
      name="firstName" 
      ng-class="{ 'highlight-error' : groupEdit.showError && 
       groupEdit.firstName.$invalid }" /> 
     <button ng-click="groupEditSubmit()">group edit submit</button> 
    </form> 
</div> 


.controller('subCtrl',function($scope) { 
    $scope.groupEditSubmit = function() { 
     $scope.groupEdit.showError = $scope.groupEdit.$invalid; 
    } 
}); 

Answer 2

この問題は範囲が間違っていました。バリデータ条件「vm.hasTriedToSubmit」は、ディレクティブのコントローラではなく、外部コントローラの一部でした。私は、この値をインクルードするようにスコープ・インターフェースを変更し、ディレクティブのスコープ・イニシャライザに追加し、ディレクティブが使用される場所で渡しました。

インタフェース：

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

ディレクティブ：

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

ディレクティブの使用：提出が試行されている間

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

いくつかのチェックが発生し、ここで、「VMであります.hasTriedToSubmit "値が使用されます。それは外部コントローラで評価されていましたが、指示文では単に「false」にデフォルト設定されていたので、エラーフィードバックは表示されませんでした。