[angularjs] AngularJS 양식 유효성 검사 : ui.router 상태 변경을 통한 $ dirty 값 변경

폼이나 그 안의 컨트롤러를 링크하면 항상 $pristine. 그 이유는 모델이 formData.type단순히 일부 값을 갖고 있고, angular는 해당 값이 서버에서 오는 기본 상태인지 또는 이전 사용자 상호 작용의 결과인지 알 수있는 방법이 없기 때문입니다. string이러한 종류의 메타 데이터가 첨부되지 않은 단순한 것입니다.

원하는 것을 얻으려면 $dirty상태 전환 전반에 걸쳐 상태 를 수동으로 추적하고 $setDirty필요할 때 양식에 적용 해야합니다.

다음은 양식 단계 페이지에 컨트롤러를 추가하여 종료시 양식 상태를 저장하고 (공유 서비스 인스턴스 resolve에도 이를 통해 추가 할 수 있음 ) 생성시 복원 하는 간단한 예 입니다. 전류 formPage는 기본 매개 변수 값을 통해 주입되므로 모든 단계에 동일한 컨트롤러를 사용할 수 있습니다.

// router:
    
    $stateProvider.state('form.interests', {
      url: '/interests',
        controller: 'FormStepController',  
          params: { formPage: 'interests'}
            templateUrl: 'form-interests.html'
            })
            
            // state
            
            angular.value("formDirtyState", {});
            
            // controller
            
            angular.controller("FormStepController", function($scope, formDirtyState, $stateParams) {
              var formPage = stateParams.formPage;
              
                for(var formField in $scope.myMultiStepForm[formPage]) {
                    if(formDirtyState[formPage] && formDirtyState[formPage][formField])
                          $scope.myMultiStepForm[formPage][formField].$setDirty()
                            }
                                
                                
                                  $scope.$on("$destroy", function() { 
                                      for(var formField in $scope.myMultiStepForm[formPage])
                                            formDirtyState[formField] = $scope.myMultiStepForm[formPage][formField].$dirty;
                                              })
                                              
                                              })

스 니펫 확장

-------------------

내가 해결했고 해결책은 아래 플 런커에 있습니다.

이것을 참조하십시오 :

참고 : ngForm의 목적은 컨트롤을 그룹화하는 것이지만 태그의 모든 기능 (예 : 서버에 게시 등)을 대체하는 것은 아닙니다.

당 ngForm 요소에 대한 각도 문서 .

또한 왜 많은 <ng-form>요소를 사용하는지 궁금 합니다. 이것이 문제에 대한 유일한 해결책입니다.

Plunker Modified

업데이트 1 :

$ dirty에 대한 설명

$ dirty 는 사용자 가 현재 범위의 특정 요소와 상호 작용 한 경우에만 true로 설정됩니다 .

당신이 참 / 거짓 문제에 너무나 특별한 경우

• $ dirty 를 $ pristine 으로 대체하도록 제안

업데이트 2 :

다시 돌아갈 때 값이 참이 아닌 이유

한 양식에서 다른 양식으로 이동하면 해당 특정 요소의 ng-form 범위 가 상위 컨트롤러에 추가되고 동일한 ng-form을 다시 방문 하면 기존 양식의 범위로 재정의 됩니다.

출처
https://stackoverflow.com/questions/39920213