사용자 지정 구성 요소별로 양식 무효화 | AngularJS

Question

나는 내 길을 수색했지만 이것을 알아낼 수는 없다. 서버에서 항목을로드하고이를 사용자에게 보여주고 사용자가 선택할 수 있도록 지시문 manyToOneSelect (사용자 지정 구성 요소)을 만들었습니다. 잘 작동하지만 사용자가 항목을 선택하지 않은 경우 양식 제출을 방지하는 방법, 즉 양식을 무효화하는 방법을 알 수 없습니다.

이

<form ng-href="#/" ng-submit="save()"> 
<many-to-one-select entity-name="customer" entity-field="name" 
    bind-variable="entity.customerUuid"></many-to-one-select> 
... 

내 문제가 보인다

여기

<select ng-hide="disable" ng-options="entity.uuid as entity[entityField] for entity in entities" ng-model="bindVariable" required></select> 
<span ng-show="disable">{{lookup(bindVariable)[entityField]}}</span> 

내가 지시어를 사용하는 방법입니다

여기

angular.module('myApp.directives'). 
    directive('manyToOneSelect', function(entityService) { 
     return { 
      restrict:'E', 
      templateUrl:'partials/control/n21select.html', 
      scope:{ 
       entityName:'@', 
       entityField:'@', 
       bindVariable:'=' 
      }, 
      compile:function (tElement, tAttrs, transclude) { 
       return function (scope, element, attrs) { 
        var inner = element.children("#n21select"); 
        scope.entities = []; 
        scope.$watch('entityName', function ($new, $old) { 
         entityService.getList(scope.entityName, function (data) { 
          scope.entities = data; 
         }, []); 
        }, true); 
        scope.lookup = function(uuid) { 
         for(var i in scope.entities) { 
          if(scope.entities[i].uuid == uuid) { 
           return scope.entities[i]; 
          }}}}}}}); 

가 해당 부분 partials/control/n21select.html입니다 : 아래

는 거의 지시자이다 전략의 부족,보다는 오히려 "일하기 위하여 그것을 완전히 얻기", 그러므로 너는 " 위에 게시 한 코드에서 어떤 시도가 보이지 않습니다. 다음에 이것이 공개적으로 질문이되게하십시오 : 그것을하는 방법? :) 이미 많은 점을 알고 있습니다!

Answer 1

몇 가지 방법이 있습니다.

지시어를 이미 작성한 방법을 고려할 때 한 가지 방법은 양식 자체에 범위 속성을 추가하는 것입니다. 뭔가 같은 :

scope: { 
    form: '=' 
} 

그럼 당신은 같은에서 양식 요소를 전달할 것 :

<form name="myForm" ng-submit="whatever()"> 
    <my-directive-name form="myForm"></my-directive-name> 
</form> 

그리고 당신은 당신의 양식을 무효화하고자하는 사용자의 지시에 상황에

, 당신은 단지에 $ setValidity를 호출 할 것 그것은 : 여기, 그것을 할 수있는 한 가지 방법이다

는

link: function(scope, elem, attr) { 
    if(somethingIsWrong) scope.form.$setValidity('reason', false); 
} 

당신이 당신의 지시를 다시 엔지니어 수 있다면 그것을 할 수있는 더 나은 방법이있다 :

아마도 다른 방법으로 지시문에 ngModel이 필요합니다. 그럼 당신은 ngModel의 컨트롤러가 전달 될 것이다, 당신의 검증을 통해 더 grainular으로 관리 할 수 ​​있습니다 당신은 양식 및 양식에 단일 필드를 모두 무효로 그것을 사용할 수 있습니다

app.directive('bettererWay', function() { 
     return { 
     require: 'ngModel', 
     restrict: 'E', 
     link: function(scope, elem, attr, ngModel) { 
      if(somethingIsBad()) ngModel.$setValidity('somethingIsBad', false); 
     } 
     }; 
    }); 

을 그리고 당신이 할 방법 그것, 요컨대. 희망적으로 그것은 당신을 올바른 방향으로 시작하게합니다.

---

편집 : (주석)에 관계없이 유효 기간의 제출과 함께 이상한 문제는

이 분명히 HTML 사양을 준수하려고 노력 각도에 의해 발생하는 문제입니다. 자신의 코드 approx. line 214 here의 주석에서

: 그래서

* To prevent double execution of the handler, use only one of ngSubmit or ngClick directives. This 
* is because of the following form submission rules coming from the html spec: 
* 
* - If a form has only one input field then hitting enter in this field triggers form submit 
* (`ngSubmit`) 
* - if a form has has 2+ input fields and no buttons or input[type=submit] then hitting enter 
* doesn't trigger submit 
* - if a form has one or more input fields and one or more buttons or input[type=submit] then 
* hitting enter in any of the input fields will trigger the click handler on the *first* button or 
* input[type=submit] (`ngClick`) *and* a submit handler on the enclosing form (`ngSubmit`) 

, 위의 주어, 당신의 지시자가 아니라 그것의 것보다 페이지에 숨겨진 유형의 입력 요소에 묶여있는 좋은 생각이 될 수도 있습니다 자신의 요소. 양식에 요소가 두 개 이상있는 경우 invalidity는 제출을 방해하지 않습니다.