AngularJS: Требуемый атрибут работает для некоторых полей, но не для других?

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

Я отвечаю без проверки, поэтому дайте мне знать, если вам нужен пример ... во-первых, моя рекомендация используйте одну форму с разными div, которые вы можете переключить с помощью ng-show. есть ли специальная причина, по которой вам нужны вложенные формы? во-вторых, метки не обязательно должны иметь требуемое поле, и вы также написали несколько строк с col-md-12. в-третьих, где вы отправляете свою форму? Я не видел этого в вашем коде. дайте мне знать, разрешите ли вы это.