동일한 페이지에서 두 개의 양식에 대한 AngularJS 유효성 확인

Question

동일한 페이지에 유효성 검사가 필요한 두 개의 양식이 있습니다. 문제는 $ invalid를 사용하여 유효한지 확인할 수 있도록 양식 중 하나가 데이터 바인딩되고 있다는 것입니다.

<form name="checkoutShippingForm" role="form" novalidate> 
        <div class="row"> 
         <div class="col-md-4"> 
          <label for="txtAddress1">Address 1:</label> 
         </div> 
         <div class="col-md-8"> 
          <input type="text" name="txtAddress1" data-ng-model="vm.Shipping.Address.AddressLine1" required /> 
          <div class="error" data-ng-show="checkoutShippingForm.txtAddress1.$dirty && checkoutShippingForm.txtAddress1.$invalid"> 
           <small class="error" data-ng-show="checkoutShippingForm.txtAddress1.$error.required">An Address is required.</small> 
          </div> 
         </div> 
        </div> 
        Invalid? {{checkoutShippingForm.$invalid}} <!--Doesn't show --> 
</form> 

<form name="checkoutBillingForm" role="form" novalidate> 
        <div class="row"> 
        <div class="col-md-4"> 
         <label for="txtBillingAddress1">Billing Address 1:</label> 
        </div> 
        <div class="col-md-8"> 
         <input type="text" id="txtBillingAddress1" name="txtBillingAddress1" data-ng-model="vm.Billing.Address.AddressLine1" required /> 
         <div class="error" data-ng-show="checkoutBillingForm.txtBillingAddress1.$dirty && checkoutBillingForm.txtBillingAddress1.$invalid"> 
          <small class="error" data-ng-show="checkoutBillingForm.txtBillingAddress1.$error.required">An Address is required.</small> 
         </div> 
        </div> 
       </div> 
        invalid: {{checkoutBillingForm.$invalid}} <!--Shows true --> 
</form> 

Answer 1

하십시오 : 바인드 점점되지 않고, (더러운 $는 등 잘못된 $)

가 여기 내 html 페이지의 코드 조각의 IT의 방법 중 하나를 호출 할 수 없습니다와 같은 그러나 다른 형태로 보인다 여기

아래 참조 대체

<div class="error" data-ng-show="checkoutBillingForm.txtBillingAddress1.$dirty && checkoutBillingForm.txtBillingAddress1.$invalid"> 

<div class="error" data-ng-show="checkoutBillingForm.txtBillingAddress1.$dirty || checkoutBillingForm.txtBillingAddress1.$invalid"> 

01,235,164와

var app = angular.module('app', []);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <form name="checkoutShippingForm" role="form" novalidate=""> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <label for="txtAddress1">Address 1:</label> 
 
     </div> 
 
     <div class="col-md-8"> 
 
     <input type="text" name="txtAddress1" data-ng-model="vm.Shipping.Address.AddressLine1" required="" /> 
 
     <div class="error" data-ng-show="checkoutShippingForm.txtAddress1.$dirty && checkoutShippingForm.txtAddress1.$invalid"> 
 
      <small class="error" data-ng-show="checkoutShippingForm.txtAddress1.$error.required">An Address is required.</small> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    Invalid? {{checkoutShippingForm.$invalid}} 
 
    <!--Doesn't show --> 
 
    </form> 
 
    <form name="checkoutBillingForm" role="form" novalidate=""> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <label for="txtBillingAddress1">Billing Address 1:</label> 
 
     </div> 
 
     <div class="col-md-8"> 
 
     <input type="text" id="txtBillingAddress1" name="txtBillingAddress1" data-ng-model="vm.Billing.Address.AddressLine1" required="" /> 
 
     <div class="error" data-ng-show="checkoutBillingForm.txtBillingAddress1.$dirty || checkoutBillingForm.txtBillingAddress1.$invalid"> 
 
      <small class="error" data-ng-show="checkoutBillingForm.txtBillingAddress1.$error.required">An Address is required.</small> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

Answer 2

당신은 한 페이지에 NG-형태로 여러 번 사용할 수 있습니다.

HTML :

컨트롤러에서

<ng-form name="scope.form"> 
      <div> 
       <table> 
        <tbody> 
         <tr> 
          <td class="col-md-3"> 
           <div class="label-color">HEADER NAME <span class="red"><strong>*</strong></span></div> 
          </td> 
          <td class="col-md-9"> 
           <input type="text" name="headerName" id="headerName" ng-change="scope.checkHeaderName(header.headerName)" 
            ng-model="header.headerName" maxlength="50" class="form-control" required> 
           <div ng-show="scope.form.$submitted || scope.form.headerName.$touched"> 
            <span ng-show="scope.form.headerName.$error.required" class="label-color validation-message">Header Name is required</span>           
           </div> 
          </td> 
         </tr>        
         <tr> 
          <td class="col-md-3"> 
           <div class="label-color">HEADER DESCRIPTION <span class="red"><strong>*</strong></span></div> 
          </td> 
          <td class="col-md-9"> 
           <textarea name="headerDesc" id="headerDesc" ng-model="header.headerDesc" class="form-control" maxlength="50" required rows="3" cols="15"></textarea> 
           <div ng-show="scope.form.$submitted || scope.form.headerDesc.$touched"> 
            <span ng-show="scope.form.headerDesc.$error.required" class="label-color validation-message">Header description is required</span> 
           </div> 
          </td> 
         </tr> 
        </tbody> 
       </table>      
      </div> 
     <button ng-click="scope.changePage(2)" type="button" class="btn btn-default pull-right">Next</button> 
     </ng-form> 


     <ng-form name="scope.supervisionform">    
      <div class="supervision-search-block">             
       <div class="input-group"> 
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
         <div class="form-group"> 
          <div class="label-color">CERTIFICATE NUMBER (LAST 6 DIGITS) <span class="red"><strong>*</strong></span></div> 
          <input type="text" maxlength="6" pattern="[0-9]{6}" name="licenseNumber" id="licenseNumber" class="form-control" ng-model="scope.licenseNumber" required /> 
          <span ng-show="(scope.supervisionform.licenseNumber.$dirty && scope.supervisionform.licenseNumber.$error.required)" class="help-block">License Number is required</span> 
          <span ng-show="scope.supervisionform.licenseNumber.$dirty && scope.supervisionform.licenseNumber.$error.pattern" class="help-block">Please provide only 6 digits</span> 
         </div> 
        </div> 
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
         <div class="form-group"> 
          <div class="label-color">LAST NAME <span class="red"><strong>*</strong></span></div> 
          <input type="text" maxlength="20" name="lastName" id="lastName" class="form-control" ng-model="scope.lastName" required/> 
          <span ng-show="scope.supervisionform.lastName.$dirty && scope.supervisionform.lastName.$error.required" class="help-block">Last Name is required</span> 
         </div> 
        </div> 
        <span class="input-group-btn">         
         <button type="button"            
          ng-click="scope.validateSupervisionCertificate()" 
          class="btn btn-primary">Search 
         </button>        
        </span> 
       </div>           
      </div> 
      <div>      
       <button ng-click="scope.submitPlantReg();" type="button" class="btn btn-default pull-right">Submit</button> 
      </div> 
     </ng-form> 

:

changePage(pageNumber) { 
    let self = this; 

    if (self.form && self.form.headerName.$invalid) { 
     self.form.premise.$setDirty(); 
     self.form.premise.$setTouched(); 
     return; 
    } 

    if (pageNumber == 2) { 
     Do something.. 
    }   
} 

submitPlantReg() { 
    let self = this; 

    // Supervision verification form validation 
    if (scope.supervisionForm.supervisionType.$invalid || scope.supervisionForm.licenseNumber.$invalid || scope.supervisionForm.lastName.$invalid || 
     scope.supervisionForm.contractorName.$invalid || scope.supervisionForm.contractorClass.$invalid) { 
     scope.supervisionForm.$setDirty(); 
     scope.supervisionForm.licenseNumber.$setDirty(); 
     scope.supervisionForm.lastName.$setDirty(); 
     scope.supervisionForm.contractorName.$setDirty(); 
     scope.supervisionForm.contractorClass.$setDirty(); 
     scope.supervisionForm.$setSubmitted(); 
     return; 
    } 

    Do something else... 
}