함수 내에서 angularJS를 사용하여 입력 유효성 확인

내 코드는 다음과 같습니다.함수 내에서 angularJS를 사용하여 입력 유효성 확인

<form name="palletForm" novalidate=novalidate> 
<div ng-app='myApp' ng-controller="MainCtrl"> 
    <!--Small Package starts here --> 
    <div ng-repeat="prdElement in packageElement track by $index" class="package-grid"> 
     <table class="hovertable"> 
      <thead> 
       <tr> 
        <th>Line Quantity#</th> 
        <th>Ship Quantity</th> 
        <th>PickQuantity</th> 
        <th>Quantity in Plt</th> 
        <th>Allready Packed</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="data in prdElement.Data" ng-init="data.newquantity = 0"> 
        <td>{{data.LINQTY}}</td> 
        <td>{{data.SHPQTY}}</td> 
        <td>{{data.PickQty}}</td> 
        <td> 
         <input ng-model="data.newquantity" placeholder="Quantity" required=required type="number" /> 
        </td> 
        <td>{{data.SHPQTY}}</td> 
       </tr> 
       <tr> 
        <td width="100%" colspan="4"> 
         <button ng-show="prdElement.show" type="button" ng-click="newPackageItem(prdElement,$event)">Finish Package</button> 
        </td> 

       </tr> 
      </tbody> 
     </table> 
    </div> 
    <!--Small Package ends here --> 
</div>

angular.module('myApp', ['ui.bootstrap']); 
angular.module('myApp', []).controller('MainCtrl', ['$http', '$scope', function ($http, $scope) { 

    var counter = 0; 

    $scope.packageElement = [{ 

     show: true, 
     palletClosed: false, 
     disableNextPallet: false, 
     Data: [{ 
      "ITMLN": 100, 
      "ITCLS": "EPZ", 
      "ITEMNO": "021041029300", 
      "LINQTY": 1, 
      "SHPQTY": 0, 
      "PickQty": 1000, 
      "Qtyplt": 0, 
      "packed": 0 

     }, { 
      "ITMLN": 100, 
      "ITCLS": "EPZ", 
      "ITEMNO": "4901000002201", 
      "LINQTY": 1, 
      "SHPQTY": 0, 
      "PickQty": 2000, 
      "Qtyplt": 0, 
      "packed": 0 
     }] 
    }]; 


     $scope.newPackageItem = function (packageElement, $event) { 

      var npackageElement = {}; 
      angular.copy(packageElement, npackageElement); 
      counter++; 
      packageElement.show = false; 

      npackageElement.name = counter; 
      angular.forEach(npackageElement.Data, function (row) { 
       if (row.PickQty != row.newquantity || row.PickQty != 0) { 
        row.PickQty = row.PickQty - row.newquantity; 
        row.SHPQTY = Number(row.SHPQTY) + Number(row.newquantity); 
       } 

      }); 

      npackageElement.show = true; 
      angular.forEach(packageElement.Data, function (row) { 

       row.SHPQTY = Number(row.SHPQTY) + Number(row.newquantity); 

      }); 
      $scope.packageElement.push(npackageElement); 

     }; 

}]);

버튼 내부 내가 newPackageItem 내가 그 함수가 실행되기 전에 내 텍스트 상자를 유효성을 검사 할 함수를 호출하고 클릭합니다. 텍스트 상자는 번호 필드이고 필수 항목입니다. 각형으로 유효성을 검사하고 싶습니다. 이것을 어떻게 할 수 있습니까?

Fiddle

출처

2014-10-13 Athul

<body ng-app="phonecatApp"> 
    <form ng-controller="PhoneListCtrl" name="myForm"> 
     <p> 
      <input name="Quantity" ng-model="data.newquantity" placeholder="Quantity" required=required type="number" /> 
<span class="error" ng-show="myForm.Quantity.$error.pattern"> 
</span> 

     </p> 
    </form> 
</body>

과에

var phonecatApp = angular.module('phonecatApp', []); 
phonecatApp.controller('PhoneListCtrl', function ($scope) { 
    $scope.pattern = /^[0-9]*$/; 
});

이 검증 examp입니다 자바 스크립트 파일 jsfiddle에 업로드 :

http://jsfiddle.net/sfk1bu1y/1/

출처

2014-10-13 08:55:19 Gbolahan

AngularJS와 유효성 검사를 형성 당신의 친구입니다 :

https://docs.angularjs.org/guide/forms

출처

2014-10-13 08:30:01 Variant

함수 내에서 angularJS를 사용하여 입력 유효성 확인

답변

관련 문제