ng폼 전체에 대한 변경과 같은 기능

ng폼 전체에 대한 변경과 같은 기능

나는 다음과 같은 일을 하고 싶다.ng-change입력 필드 중 하나가 변경될 때마다 전체 폼에 대한 정보를 제공합니다.

AngularJS 1.3 이후 debounce 옵션이 있는 것은 알고 있습니다만, 1개의 입력에만 적용됩니다.

폼 전체에 적용되는 "debounce"/"on change" 기능을 찾고 있습니다.

할 수 있는 기본 제공 방법은 없습니다.ng-change폼을 위해서요.

뷰 모델을 올바르게 구성했다면 양식 입력이 특정 범위 노출 속성에 바인딩될 가능성이 높기 때문에 필요하지 않을 수도 있습니다.

$scope.formData = {};

보기:

<form name="form1">
  <input ng-model="formData.a">
  <input ng-model="formData.b">
</form>

그런 다음 자세히 관찰할 수 있습니다.$watch모델 변경(필요한 요소에 임의의 디바운스 옵션 적용):

$scope.$watch("formData", function(){
  console.log("something has changed");
}, true);

문제는 물론 이것은 철저한 감시이며 비용이 많이 든다는 것입니다.또한 폼의 변경뿐만 아니라 폼의 변경에도 대응합니다.formData모든 소스로부터.

그 대신 폼을 보완하고 폼의 변경 이벤트에 대응하는 독자적인 디렉티브를 작성할 수 있습니다.

.directive("formOnChange", function($parse){
  return {
    require: "form",
    link: function(scope, element, attrs){
       var cb = $parse(attrs.formOnChange);
       element.on("change", function(){
          cb(scope);
       });
    }
  }
});

용도는 다음과 같습니다.

<form name="form1" form-on-change="doSomething()">
  <input ng-model="formData.a">
  <input ng-model="formData.b">
</form>

일러스트레이션용 플런커

jQuery 설명서에 따르면 "변경" 이벤트는 텍스트 입력에 대해 흐릿한 경우에만 발생합니다.

그change값이 변경되면 이벤트가 요소로 전송됩니다.이 이벤트는 다음과 같이 제한됩니다.<input>요소들,<textarea>박스 및<select>요소들.선택 상자, 체크 박스 및 라디오 버튼의 경우 사용자가 마우스로 선택했을 때 이벤트가 즉시 발생하지만 다른 요소 유형에서는 요소가 포커스를 잃을 때까지 이벤트가 지연됩니다.

이것을 하기 위한 한 가지 "불량한" 방법은 감시자를 더티한 형태로 설정하는 것입니다. 당신의 요구 사항에 따라 당신은 다음과 같은 것을 할 수 있습니다.

   $scope.$watch('form.$dirty',function(v){
         if(!v){return}
         form.$setPristine()
         /*do something here*/
    })

폼이 수정될 때마다 실행됩니다.유효한 수정 폼에서만 코드를 실행하고 싶다면 다음 작업을 수행할 수 있습니다.

       if(!v || form.$invalid){return}

폼이 $valid 상태가 되었을 때만 코드를 실행하려면 폼 워처를 설정하기만 하면 됩니다.$valid'

watchers로 스코프를 오염시키고 싶지 않다면 언제든지 변경 시 api 이벤트를 공개하고 watcher를 내부적으로 관리하는 디렉티브를 생성할 수 있습니다.

Eric Soyke 코멘트에 따르면 키업 이벤트에 대한 폼 변경 체크를 연결할 수 있습니다.

이렇게 하면 삽입 디렉티브ng-keyup을 간단하게 사용할 수 있습니다.

<form name="form1" ng-keyup="doSomething()">

그래, 엄청 늦었지... 근데 이건 꽤 깔끔하게 작동해.

// html
<form name="$ctrl.form">...</form>

// controller
function $postLink() {
    ctrl.form.$$element.on('change', function () {
        console.log('fired');
    });
}

언급URL : https://stackoverflow.com/questions/28677638/ngchange-like-functionality-for-the-entire-form