0
所以我有一個內嵌表格的形式。當我點擊提交時，如果有任何未填寫的必填字段，我希望這些框突出顯示，並顯示警報。AngularJS：必填屬性適用於某些字段，但不適用於其他字段？
我現在的工作適用於公司信息字段中的所有字段 - 警報顯示正確，字段突出顯示，表格未提交。但是，這不適用於產品信息中的字段。即使沒有填寫要求的表格，表格也會繼續提交，並且沒有無效的突出顯示。
但是，我注意到，如果我在公司信息和產品信息中的無效字段中包含無效字段，則所有字段都有無效突出顯示，並且不會繼續提交。但是隻有產品信息包含無效字段的情況不起作用。此外，如果我從產品表單屬性中刪除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;
}