Angularjs, 양식의 라디오 버튼이 선택되었는지 확인하십시오.

Question

저는 AngularJS로 시작하고 있으며, 사용자가 다른 페이지를 채워야하는 다중 단계 양식을 만들고 있습니다. 페이지를 마쳤 으면 다음 버튼을 누르고 다음 페이지를 채울 수 있습니다. 첫 페이지

, 나는 HMTL에 required로 표시된 다른 텍스트 입력 필드 ( pageOneForm 이름) 폼을 내장 한, 상대 컨트롤러 나는이 시계하고 있어요 :

$scope.$watch('pageOneForm.$valid', function(validity) { 
     ModelData.actualPageCompleted = validity; 
}) 

을

그리고 그것은 charme처럼 작동합니다. 내 모델 (ModelData)이 업데이트되었습니다.

두 번째 페이지 인 앱의 다음 부분에 동일한 로직을 적용하려고했습니다. 입력 텍스트 대신 사용자는 두 개의 다른 라디오 버튼 그룹에서 두 가지 옵션을 선택해야합니다.

<div ng-Controller="PageTwo" ng-show='data.actualPage == 2'> 
    <form name="pageTwoForm"> 
     <h3>General Information > Knowledge About </h3> 
     <div> 
     <b>User</b> 
     <div ng-repeat="option in userOptions"> 
      <input type="radio" name="userGroups" ng-model="data.knowledgeAboutUser" ng-value="option.id" id="{{option.id}}" required>{{option.text}} 
     </div> 


     <div ng-repeat="option in targetGroupUserOptions"> 
      <input type="radio" name = "targetUserGroup" ng-model="data.knowledgeAboutTargetGroup" ng-value="option.id" id="{{option.id}}" required>{{option.text}} 
     </div> 
    </div> 
</form> 

와 나는 그것의 컨트롤러에 위와 동일한 코드를 구현했습니다 : 그래서 나는 ng-repeat 통해 HTML에서 버튼의 목록을 구축

$scope.$watch('pageTwoForm.$valid', function(validity) { 
     ModelData.actualPageCompleted = validity; 
}) 

하지만 분명히 그것은 아무튼 작동하지 않고 내 모델에서 actualPageCompleted은 항상 true ... 내가 뭘 잘못하고 있니? 감사합니다.

Answer 1

예제 코드로 작업하기 위해 약간의 더미 데이터가있는 컨트롤러를 만드는 데 최선을 다했습니다. Here is the fiddle 당신이 양식의 유효 상태를 업데이트 할 $ 강제주기를 소화하는 데 필요한 방법

$scope.forceDigest = function(){ 
     setTimeout(function(){ $rootScope.$$phase || $rootScope.$apply(); }); 
    }; 

이 필요한 이유입니다, 라디오 버튼 (this SO post for more details 참조) NG를 클릭합니다. 또는 메서드 호출을 제거하고 양식 객체를 강제 업데이트하기 위해 fetch에서 html 코드

의 주석 처리를 제거 할 수 있습니다.

ModelData.actualPageCompleted은 pageOneForm.$valid이 true로 설정되었을 때부터 그 실제 값을 유지하지 못하고 설정해야합니다.

도움이되기를 바랍니다.