AngularJS客戶端驗證指令

我正在使用指令來封裝部分表單。有一個封閉的表單將模型值傳遞給指令。這裏是基本的佈局：AngularJS客戶端驗證指令

<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，我會停止提交表單，但是我沒有碰到指令中的那些問題。基本上我需要一種方法來通知指令中的封閉表單來觸發驗證。

來源

2017-02-27 Irish

我認爲你的問題是沒有驗證，但是何時顯示驗證錯誤，是否正確？這裏是我怎麼做的一個小例子

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

來源

2017-02-27 23:09:57 koolunix

這個問題是一個範圍的錯誤。驗證條件「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「值被使用。它正在外部控制器上進行評估，但在指令中它只是默認爲「錯誤」，所以我的錯誤反饋未被顯示。

來源

2017-02-28 14:51:35 Irish

AngularJS客戶端驗證指令

回答

相關問題