2016-08-26 4 views
1

<div class="row"> 
    <div class="col-xs-3 align-right"> 
     <p>Email</p> 
    </div> 
    <div class="col-xs-7"> 
     <input type="text" class="form-control" ng-model="registrationForm.email.value"/> 
     <span class="error-label" ng-hide="registrationForm.email.valid"><span class="glyphicon glyphicon-remove"></span>Must be a valid email!</span> 
    </div> 
    </div> 

HTML의이 비트가 제공 한 이메일이 유효하지 않은 경우 표시되는 오류 레이블, 이메일 필드를 만들고 ... 나는 다음과 같은 HTML을 말한다. 이것은 완벽하게 작동하며 내 질문의 일부가 아닙니다.

이 라벨의 동작을 약간 변경하고 싶습니다. 사용자가 처음 양식을 방문 할 때 사용자가 양식 입력 값을 변경하지 않으면 오류 레이블을 표시하고 싶지 않습니다.

속성은 키가 있지만 및 $dirty 인 것처럼 보이지만 사용 방법에 대해서는 혼란 스럽습니다. email.value (I.E. registrationForm.email.value.$pristine) 속성에 액세스하려고하면 속성이 정의되지 않은 것 같습니다.

이 입력을 HTML 양식으로 묶는 것을 피하고 싶습니다. 이러한 속성을 계속 사용할 수있는 방법이 있습니까? 그렇다면 어떻게 사용합니까?

답변

1

<form> 요소를 만들면 $scope 변수가 양식 이름과 함께 생성됩니다. 예를 들어 :

<form name="regForm"> 
    <div class="row"> 
    <div class="col-xs-3 align-right"> 
     <p>Email</p> 
    </div> 
    <div class="col-xs-7"> 
     <input type="text" class="form-control" name="email" ng-model="registrationForm.email.value"/> 
     <span class="error-label" ng-hide="registrationForm.email.valid"><span class="glyphicon glyphicon-remove"></span>Must be a valid email!</span> 
    </div> 
    </div> 
</form> 

당신은 $pristine$scope.regForm.email.$pristine를 사용하여 액세스 할 수 있습니다.

<form>이 없으면 실제 <form> 요소가 없어도 양식의 기능을 제공하는 ng-form을 사용하면됩니다. 자세한 내용은 this post을 참조하십시오.