AngularJs가 지시문의 입력 필드를 사용하여 양식의 유효성을 검사합니다.

비슷한 제출 양식이있는 프로젝트에서 작업 중이므로 일부 필드를 지시문으로 이동하기로했습니다.AngularJs가 지시문의 입력 필드를 사용하여 양식의 유효성을 검사합니다.

양식 예 :

<div loading class="col-sm-12" ng-controller="Controller"> 
     <form name="myForm" role="form" novalidate> 
      <fieldset class="lines-header-border"> 
       <div class="col-sm-6"> 
        <div class="form-group"> 
         <label class="col-sm-4 control-label">Date</label> 
         <div class="col-sm-7"> 
          <date-field 
          model="myModel" 
          date-picker-options="datePickerOptions" 
          for-name="date" 
          for-ng-class="myForm.date.$invalid" 
          is-required="true"/> 

         </div> 
        <div class="col-sm-4"> 
        <input class="form-control" 
          name="amount" 
          ng-model="amount" 
          ng-class="{ 'has-error' : myForm.amount.$invalid }" 
          required/> 
       </div> 
        </div> 
      </fieldset> 
     </form> 
    </div>

날짜 필드 지시자 :

.directive('dateField', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      model: '=', 

      datePickerOptions: '=', 

      isRequired: '@', 

      forName:'@', 

      forNgClass: '&' 
     }, 
     template: '<input ui-date="datePickerOptions" type="date" name="{{forName}}" class="form-control" ng-model="model" ng-class="{ \'has-error\' : forNgClass()}" ng-required="isRequired"/>' 
    }; 
});

검증 문제 제출에 : 다른 필드는 버튼 클릭을 제출 양식에 확인하지만,이 날짜 도착 필드가 없습니다. 나는 문제가 for-ng-class="myForm.date.$invalid"에 있다고 생각한다.

제안 사항?

출처

2014-06-12 kuldarim

귀하의 경우 지시어 속성 "for-ng-class"를 통해 컨트롤러 범위 변수 "myForm.date. $ invalid"에 액세스하려고합니다. 양방향 데이터 바인딩을 위해 지시문 범위 변수 "forNgClass"에 "@"를 지정하십시오. 입력 필드가 변경되면 그에 따라 클래스가 업데이트됩니다.

scope:{ 
    ..... 
    forNgClass: "@" 
    ..... 
}

I는 간단한 구현 예 :

UPDATE : 각도 때문에 동적 입력 요소의 name 속성을 생성 할 수있다. 우리는 (ngForm 지시문을 사용하여) 내부 형식으로 dateField의 입력 요소를 래핑해야합니다. 각도 세계에서 중첩 된 양식에 대한 자세한 내용은 Angular Doc을 참조하십시오.

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
     .has-error{ 
      background:#ccc; 
      border: 1px solid red; 
     } 
    </style> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script> 
    <script src="angular-ui-date.js"></script> 
</head> 

<body ng-app="MyApp"> 
    <div ng-controller="MyCtrl"> 
     <form name="myForm" novalidate> 
      <h2>Selected date: {{dateData}}</h2> 
      <date-field model="dateData" is-required="true"></date-field> 
      <date-field model="dateData2" is-required="true"></date-field> 
      <h3>myForm is invalid?</h3>{{myForm.$invalid}} 
     </form> 
    </div> 
    <script> 
     angular.module("MyApp",['ui.date']) 
     .controller("MyCtrl",function($scope){ 

     }) 
     .directive("dateField",function(){ 
      return { 
       restrict: "E", 
       replace: "true", 
       template: '<ng-form name="subForm"><input ui-date ui-date-format="yy-mm-dd" type="date" ng-class="{\'has-error\':subForm.myDate.$invalid}" name="myDate" ng-model="model" ng-required="isRequired"/></ng-form>', 
       scope:{ 
        model: "=", 
        isRequired: "@" 
       } 
      }; 
     }); 
    </script> 
</body> 

</html>

여기는 Online demo입니다. 당신은 그것을 참조 할 수 있습니다.

출처

2014-06-13 06:33:03 Chickenrice

답장을 보내 주셔서 감사합니다. 그러나 내가 보았 듯이'name = "myDate"'를 템플릿에 추가했습니다. 'name = "forName"'을 사용할 수 있습니까? 따라서 전달 된 필드 이름을 참조하고 하드 코딩 된 필드 이름은 참조하지 않습니다. – kuldarim

불행히도 Angular는 입력 요소의 name 속성을 동적으로 생성 할 수 없습니다. 내 대답과 온라인 데모를 업데이트했습니다. 어쩌면 중첩 된 양식을 사용하여 문제를 해결할 수 있습니다. – Chickenrice

조언을 주셔서 감사합니다. 귀하의 제안을 사용하는 것이 좋습니다. 그러나 지금은 더 작은 코드 복잡성을 위해 하드 코드 된 이름을 사용할 것이라고 생각합니다. – kuldarim

AngularJs가 지시문의 입력 필드를 사용하여 양식의 유효성을 검사합니다.

답변

관련 문제