상위 범위에서 ng 포함 양식의 유효성을 어떻게 확인할 수 있습니까?

상위 범위에서 ng 포함 양식의 유효성을 어떻게 확인할 수 있습니까?

앱의 여러 뷰 간에 공유되는 보조양식이 있습니다.한 보기에서 이 보조양식은 아래쪽에 있는 뒤로/계속 단추와 함께 단독으로 표시되며, 이 단추는 사용자를 다음 보조양식으로 안내합니다.다른 보기에서 보조양식은 다른 보조양식과 동일한 페이지에 표시됩니다(기본적으로 하나의 긴 양식).

보조양식의 html은 두 보기 모두 100% 동일하기 때문에 부분적인 것으로 구분하여 사용하고 있습니다.ng-include렌더링할 수 있습니다.뒤로/계속 버튼이 있는 보조양식만 표시하는 보기에서, 나는 부모 HTML 내에서 뒤로/계속 버튼을 렌더링합니다.

시각적으로 모든 것이 정상적으로 동작하며 양식에 입력된 모든 데이터에 액세스할 수 있습니다(user.email, user.password, user.etc...).

문제는 사용자가 폼을 올바르게 완료했는지 여부에 따라 "계속" 버튼을 활성화/비활성화하고 있으며, 상위 스코프가 폼의 상태에 액세스할 수 없는 것 같기 때문에 "보조폼 전용" 변형에서는 작동하지 않는다는 것입니다.버튼을 파셜에 꽂으면 동작합니다만, 이 파셜이 사용되는 모든 경우 버튼이 거기에 속하지 않기 때문에 그렇게 하고 싶지 않습니다.

JSFiddle의 예

이 예에서 빨간색 테두리 내의 제출 버튼은 상자에 입력되어 "Form Invalid?" 값이 업데이트될 때까지 비활성화되며 파란색 테두리 내의 버튼은 항상 활성화되고 "Form Invalid?" 값은 공백입니다.

의 가치에 액세스하려면 어떻게 해야 합니까?myForm.$invalid부모 범위에서요?

ng-include를 사용할 때 작성된 자식 범위는 양식 함수를 부모로부터 숨깁니다.

지시문을 사용하는 것 외에 상위 항목에 개체를 추가할 수도 있지만 다음과 같은 속성을 가진 개체로 양식 이름을 설정하는 것이 중요합니다.

<form name="myFormHolder.myForm">

부모 컨트롤러에 있습니다.

$scope.myFormHolder = {};

다음 기능이 작동합니다.

$scope.myFormHolder.myForm.$pristine

양식을 평가할 때 myForm을 사용합니다.$valid는 부모에게 설정됩니다.같은 질문을 한 것 같습니다.$pris틴 또는 $setDirty()를 체크할 때 ng-include 내에 형식이 정의되지 않은 이유는 무엇입니까?

보조양식의 경우 보조양식에서 메인양식으로 폼태그를 이동하기만 하면 됩니다.업데이트된 JSFiddle

ngForm-direction을 사용하여 폼을 중첩할 수도 있습니다.

각도 형태로 중첩할 수 있습니다.즉, 외부 양식은 모든 자식 양식이 유효한 경우에도 유효합니다.단, 브라우저에서는 요소의 네스트를 허용하지 않습니다.이 때문에 angular는 ngForm 에일리어스를 제공합니다.ngForm 에일리어스는 동작은 같지만 폼 네스트는 허용됩니다.

결과는 좀 지저분하다.$parent를 사용하지 않기 위해 새로운 범위를 가진 'myForm' 방향성을 만들고 싶습니다.예를 들어 다음과 같습니다.

myApp.directive('myForm',function(){
    return{ 
        restrict:'E',
        scope:{model:'='},
        templateUrl:'/form.html',
        replace:true
    }
});

- 이 JSFiddle의 예를 참조하십시오.

언급URL : https://stackoverflow.com/questions/15818431/how-can-i-check-an-ng-included-forms-validity-from-the-parent-scope