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

问题是范围错误。验证器条件＆＃34; vm.hasTriedToSubmit＆＃34;是外部控制器的一部分，而不是指令的控制器。我修改了我的范围接口以包含此值，将其添加到指令中的范围初始值设定项，并将其传递到使用该指令的位置。

界面：

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>

尝试提交时会发生一些检查，这是＆＃34; vm.hasTriedToSubmit＆＃34;使用了价值。它正在外部控制器上进行评估，但在指令中它只是默认为＆＃34; false＆＃34;，因此我的错误反馈未显示。

AngularJS指令中的客户端验证

2 个答案: