创建指令以检查验证并且工作正常，但即使在完全填写表单后，提交按钮也无法正常工作。 注意 ：提交按钮（下一步）在我添加指令之前工作正常，我使用角度材料和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>