0

创建指令以检查验证并且工作正常，但即使在表单完全填写后，提交按钮也无法正常工作。 注意：提交按钮（下一步）在我添加指令之前工作正常，我正在使用角度材料和 ng-messages 工作正常但仅当您尝试填写这些必填字段但如果我没有触摸或错过字段时不会显示任何错误消息，因此我添加了 validForm 指令以在单击下一步（提交）时验证表单，并且在添加指令后，单击下一步按钮时会显示错误消息，但不会将您带到下一步页面。
指令代码：

form.directive('validForm', function ($perse) {
return {
    compile: function compile(tElement, tAttrs, transclude) {
        return {
            post: function postLink(scope, element, iAttrs, controller) {
                var form = element.controller('form');
                form.$submitted = false;
                var fn = $parse(iAttrs.validForm);
                element.on('submit', function (event) {
                    scope.$apply(function () {
                        element.addClass('ng-submitted');
                        form.$submitted = true;
                        if (form.$valid) {
                            fn(scope, {
                                $event: event
                            });
                        }
                    });
                });
                scope.$watch(function () {
                    return form.$valid
                }, function (isValid) {
                    if (form.$submitted == false) return;
                    if (isValid) {
                        element.removeClass('has-error').addClass('has-success');
                    } else {
                        element.removeClass('has-success');
                        element.addClass('has-error');
                    }
                });
            }
        }
    }
}

});

控制器代码：

form.controller('Step1Ctrl', function ($scope, $location, step1Cache) {
$scope.IsEmpty = true;
var fosterCatcher = [];
$scope.childern = step1Cache.getChildern();
$scope.addChild = function () {
    $scope.childern.push({

    });
};
$scope.removeChild = function (array, index) {
    if ($scope.childern.length > 1) {
        array.splice(index, 1);
    }
};
$scope.checkNextStep = function () {

    for (var index = 0; index < $scope.childern.length; index++) {
        if ($scope.childern[index].IsFoster === true) {
            fosterCatcher.push("true");
        }
    }
    if (fosterCatcher.length === $scope.childern.length) {
        $location.path('/step4'); //'step4'
    } else {
        $location.path('/step2'); // 'step2'
    }

};
step1Cache.setChildern($scope.childern);

 });

html: 

 <md-content layout-padding>
    <div class="wrap">
        <form name="Form" valid-form="checkNextStep()" novalidate>

            <div layout-gt-sm="row" layout-align="center" class="page md-inline-form" data-ng-repeat="child in childern">

                <md-input-container class="md-block ele ">
                    <label>First Name</label>
                    <input required name="firstName" ng-model="child.firstName">
                    <div ng-messages="Form.firstName.$error">
                        <div ng-message="required">First Name is required.</div>
                    </div>
                </md-input-container>
                <md-input-container class="md-block ele" style="max-width:60px;">
                    <label>MI</label>
                    <input required name=" middleName " ng-model="child.middleName ">
                    <div ng-messages="Form.middleName.$error ">
                        <div ng-message="required">Middle Name is required.</div>
                    </div>
                </md-input-container>
                <md-input-container class="md-block ele">
                    <label>Last Name</label>
                    <input required name="lastName " ng-model="child.lastName ">
                    <div ng-messages="Form.lastName.$error ">
                        <div ng-message="required ">Last Name is required.</div>
                    </div>
                </md-input-container>

                <div class="cell ">
                    <label> <b>Student?</b></label>
                    <div style="margin-top:15px;">
                        <md-radio-group required ng-model="child.IsStudent">
                            <md-radio-button value="Yes">Yes</md-radio-button>
                            <md-radio-button value="No"> No </md-radio-button>
                        </md-radio-group>
                    </div>
                </div>
                <div class="cell ">
                    <label><b> Child's situation?(check all that apply) </b></label>
                    <div>
                        <md-checkbox ng-required="child.IsHomeless === undefined || child.IsHomeless === false " ng-model="child.IsFoster">
                            Foster Child
                        </md-checkbox>
                        <md-checkbox ng-required="child.IsFoster === undefined || child.IsFoster === false " ng-model="child.IsHomeless">
                            Homeless, Migrant, Runaway
                        </md-checkbox>

                    </div>
                    <!--   <md-button class="md-fab md-accent" ng-click="goToStep2()" aria-label="edit">

    <md-icon md-svg-src="img/ic_mode_edit_white_36px.svg" style="width: 36px; height: 36px;">
    </md-icon>
  </md-button>-->
                </div>
                <div id='rem'>
                    <md-button class="md-raised md-primary remove animate-show" ng-if="childern.length !== 1" ng-click="removeChild(childern,$index)">
                        <md-tooltip md-direction="top">
                            Delete
                        </md-tooltip>
                        <md-icon md-svg-src="img/ic_delete_white_48px.svg"></md-icon>
                    </md-button>
                </div>
            </div>
            <div layout-gt-sm="row" layout-align="center">
                <md-button class="md-raised md-accent" ng-click="addChild()">Add Child </md-button>
                <md-button type="submit" class="md-raised md-primary">
                    Next Step
                </md-button>
            </div>
        </form>
    </div>
</md-content>
4

1 回答 1

0

您应该阅读表单控制器和ng-submit。表单控制器已经设置了 CSS 类，您可能不需要自定义指令。

于 2016-01-25T11:58:56.763 回答