Question

我正在使用AngularJS创建一个Web应用程序。我在一个页面上有两个表单。我想逐个验证表单。我的问题是在表单上发生验证当我提交第一个表单时。这是我的代码：

submitAddRouter : function(router){
        var form = router.form;

        // Show error messages and exit.
        if (form.$invalid) {
            if (form.$pristine) {
                form.$setDirty();
            }
}


submitConfigureRouter : function(configureRouter){
            console.log(configureRouter);
            var form = configureRouter.form;

            // Show error messages and exit.
            if (form.$invalid) {
                if (form.$pristine) {
                    form.$setDirty();
                }       

    }

这是Form

<form name="configureRouter.form" autocomplete="off" data-ng-submit="configureRouter.submitConfigureRouter(configureRouter)" novalidate>
<select class="selectbox_menulist" required name="region" ng-model="configureRouter.region">
                                        <option value="" selected disabled>{{'popup.configureRouter.tabs.parameters.form.region' | translate}}</option>
                                        <option ng-repeat="regions in RegionList">{{regions.name}}</option>
                                    </select>
<div class="col-xs-10" ng-class="{ 'has-error' : configureRouter.form.description.$invalid && !configureRouter.form.description.$pristine }"> 
                                <textarea class="form-control" maxlength="255" required name="description" ng-model="configureRouter.description" placeholder="{{'popup.configureRouter.tabs.parameters.form.description' | translate}}"></textarea>
                            </div>
<form name="router.form" autocomplete="off" data-ng-submit="configureRouter.submitAddRouter(router)" novalidate>
    <div class="col-xs-12 add_new_route">
        <h2>New Routes</h2>
        <fieldset class="form-group">
            <label for="" class="col-xs-2 text-label">Name</label>
            <div class="col-xs-6" ng-class="{ 'has-error' : router.form.name.$invalid && !router.form.name.$pristine }"> 
                <input type="text" name="name" required ng-model="router.name" class="form-control" placeholder="Name" />
            </div>
        </fieldset>
<button class="btn btn-green">Save</button>
</form>


<button class="btn btn-white" type="button" ng-click="configureRouter.closeConfigureRouterModal()">
</form>

Answer 1

您需要至少有两个控制器进行验证，每个表单必须有自己的控制器。否则它将验证两种形式。

一页Angularjs上的两个表格

1 个答案: