Question

我正在尝试为我的表单添加验证，但是当谈到Angular时，我是一个真正的新手。表单（我没有创建）看起来像这样：

<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>

这是 controllers.js 中 StepController 的一部分：

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;
            });
    }
}

但是现在，当我点击下一步时，如何验证步骤的具体形式？

Answer 1

您需要为表单添加name属性

<form name='myForm'>

然后在角度你可以使用 {{myForm.$valid}}和或 {{myForm.$error | json}}

https://docs.angularjs.org/api/ng/directive/form

如何使用验证完全取决于您，在您的情况下，您可以执行类似的操作;

ng-click="next(myForm.$valid)"

  $scope.next = function($valid){
    alert('Is Valid? ' + $valid);
    $scope.step += 1;
    window.scrollTo(0,0);
 }

多步骤表单的表单验证

1 个答案: