Question

所以我有一个包含嵌套表单的表单。当我单击“提交”时，如果有任何必填字段未填写，我希望这些框突出显示并显示警告。

我现在对公司信息字段中的所有字段都有效 - 警报正确显示，字段突出显示，表单未提交。但是，这不适用于产品信息中的字段。即使有未填写的必填表格，表格仍会继续提交，并且没有无效的突出显示。

但我确实注意到，如果我在公司信息中包含无效字段且产品信息中包含无效字段，则所有字段都有无效的突出显示，并且不会继续提交。但是，只有产品信息具有无效字段的情况不起作用。此外，如果我从产品表单属性中删除ng-class="{failedSubmit:model.failedSubmit}"，那么即使公司和产品都包含无效字段，无效的产品字段也不会突出显示 - 所以我很困惑为什么要使用totalForm并未涵盖其包装的所有形式。

任何人都有任何见解？谢谢！

所以这是我的HTML：

    <form name="totalForm" ng-class="{failedSubmit:model.failedSubmit}">
            <div id="collapse3" class="row">
                <h1 class="no-margin">Company Information</h1>
                <form class="form-horizontal" role="form" name="company">
                    <div class="container">
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <label for="companyName-md" class="control-label required">Company Name</label>
                            </div>                                    
                                <input class="form-control" id="companyName-md" name="companyName"
                                       ng-show=type="text"
                                       ng-model="model.companyName"
                                       required/>
                            </div>
                            </div>
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <label for="companyDesc-md" class="control-label text-area-label required">Company
                                    Description</label>
                            </div>
                               <textarea class="form-control" id="companyDesc-md" name="companyDesc"
                                                      ng-model="model.companyDesc" rows="5" required> </textarea>
                            </div>
                            </div>
                        </div>
                </form>
            </div>

            <div id="collapse4" class="row email-pref">
                <h1 class="no-margin">Product Information</h1>
                <form class="form-horizontal" name="product" ng-class="{failedSubmit:model.failedSubmit}">
                    <div class="container">

                        <div class="col-md-12">
                        <div class="col-md-12">
                            <label for="productType-md" class="control-label text-area-label required">Product
                                Type</label>
                            </div>
                                <select class="form-control" id="productType-md" name="productType"
                                        ng-options="item for item in productTypeList" rows="3"
                                        ng-model="model.productType" required></select>
                        </div>
                        </div>
                        <div class="col-md-12">
                        <div class="col-md-12">
                            <label for="productDesc-md" class="control-label text-area-label required">Product
                                Description</label>
                            </div>
                                <textarea class="form-control" id="productDesc-md" name="productDesc"
                                          ng-model="model.productDesc" rows="5" required></textarea>
                        </div>
                    </div>
                    </div>
                </form>
            </div>
        </form>

这是我的CSS课程：

    form.failedSubmit .ng-invalid
{
    border:1px solid #f00;
}

这是相关的javascript代码 - 按下提交按钮后会触发：

             if (!$scope.totalForm.$valid || !$scope.product.$valid){
                    $scope.showAlerts.push($scope.alerts[0]);
                    window.scrollTo(0, 0);
                    $timeout(function(){
                        $scope.showAlerts.pop();
                    }, 3000);

                    $scope.model.failedSubmit=true;
                }

Answer 1

我在没有测试的情况下回答，所以请告诉我你是否需要示例...首先，我的建议是使用一个表格，你可以用ng-show切换不同的div。是否有特殊原因需要嵌套表格？第二，标签不需要有必要的字段，你也用col-md-12写了两行。第三，你在哪里提交表格？我在你的代码中没有看到它。如果你解决了，请告诉我。

AngularJS：必需属性适用于某些字段而不适用于其他字段？

1 个答案: