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"，因此我的错误反馈未显示。