Javascript 多步骤表单的表单验证
我试图在我的表格中添加验证,但说到角度,我是一个真正的新手。表单(我没有创建)如下所示:Javascript 多步骤表单的表单验证,javascript,angularjs,forms,validation,angularjs-controller,Javascript,Angularjs,Forms,Validation,Angularjs Controller,我试图在我的表格中添加验证,但说到角度,我是一个真正的新手。表单(我没有创建)如下所示: <div> <div ng-switch="step"> <div ng-switch-when="1"> <h1>Identity</h1> <form name="steponeForm" ng-submit="submitForm(steponeForm.$vali
<div>
<div ng-switch="step">
<div ng-switch-when="1">
<h1>Identity</h1>
<form name="steponeForm" ng-submit="submitForm(steponeForm.$valid)" novalidate>
<input type="submit" ng-click="next()" value="next" />
<input ng-model="application.lastName" required type="text" placeholder="Last name" name="app-name" id="app-name" />
<input ng-model="application.firstName" type="text" placeholder="First name" name="app-firstname" id="app-firstname" />
....
<input type="submit" ng-click="next()" value="next" />
</form>
</div>
<div ng-switch-when="2">
<h1>Studies</h1>
<form>
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="next()" value="next" />
<fieldset>
<legend>Lower secondary studies</legend>
<button id="moreLowerSecondaryStudies" more-studies>+</button>
</fieldset>
<fieldset>
<legend>Higher secondary studies</legend>
<button id="moreHigherSecondaryStudies" more-studies>+</button>
</fieldset>
....
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="next()" value="next" />
</form>
</div>
<div ng-switch-when="3">
<h1>Knowledge</h1>
<form>
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="next()" value="next" />
<fieldset>
<label for="app-interests-personal">Other matters of personal interest</label>
<textarea id="app-interests-personal" ng-model="application.interestsPersonal">
</textarea>
</fieldset>
....
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="next()" value="next" />
</form>
</div>
<div ng-switch-when="4">
<h1>Professional experience</h1>
<form>
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="next()" value="next" />
<fieldset>
<legend>Data with regard to your professional life, beginning with your last employer.</legend>
<button id="more-experience" more-experience>+</button>
</fieldset>
....
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="next()" value="next" />
</form>
</div>
<div ng-switch-when="5">
<h1>Miscellaneous</h1>
<form>
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="finish()" value="save" />
<fieldset>
<legend>Have you already applied with VK?</legend>
<input ng-model="application.alreadyApplied" type="radio" name="app-already-applied" value="no" id="app-already-applied-no" />no<br>
<input ng-model="application.alreadyApplied" type="radio" name="app-already-applied" value="yes" id="app-already-applied-yes" already-applied />yes<br>
<input ng-model="application.alreadyAppliedWhat" type="text" placeholder="For what vacancy?" name="app-already-applied-what" id="app-already-applied-what" disabled />
<input ng-model="application.alreadyAppliedWhen" type="text" placeholder="When?" name="app-already-applied-when" id="app-already-applied-when" disabled />
</fieldset>
....
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="finish()" value="save" />
</form>
</div>
</div>
</div>
但是现在,当我单击“下一步”时,如何验证步骤的特定表单?您需要为表单添加name属性
然后在角度上你可以使用
{{myForm.$valid}}
和或
{{myForm.$error | json}}
如何使用验证完全取决于您,在您的情况下,您可以执行以下操作:
ng单击“下一步(myForm.$valid)”
提示:使用
而不是
function StepController($scope, $http, $routeParams)
{
$scope.step = 1;
$scope.next = function(){
$scope.step += 1;
window.scrollTo(0,0);
}
$scope.previous = function(){
$scope.step -= 1;
window.scrollTo(0,0);
}
$scope.finish = function(){
$http.post('new-submission', { id: $scope.job_id, application: $scope.application })
.success(function(data, status, headers, config){
window.location.href = data.redirect_url;
});
}
}
$scope.next = function($valid){
alert('Is Valid? ' + $valid);
$scope.step += 1;
window.scrollTo(0,0);
}