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

【问题标题】：AngularJS: Required attribute working for some fields but not others?AngularJS：必需属性适用于某些字段但不适用于其他字段？
【发布时间】：2016-08-16 06:51:46
【问题描述】：

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

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

但是，我确实注意到，如果我在公司信息中有无效字段，在产品信息中有无效字段，则所有字段都有无效突出显示，并且不会继续提交。但是，只有产品信息具有无效字段的情况不起作用。另外，如果我从产品表单属性中删除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;
                }

【问题讨论】：

标签： javascript html angularjs forms

【解决方案1】：

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

【讨论】：