ng-model을 undefined로 설정하면 양식/입력이 다시 유효하지 않게되는 이유는 무엇입니까?

Question

나는 유형 = 모델에 바인딩 '이메일'입력 다음과 같은 간단한 양식이 있습니다

<div ng-app> 
    <h2>Clearing ng-model</h2> 
    <div ng-controller="EmailCtrl"> 
     <form name="emailForm" ng-submit="addEmail()"> 
      <input type="email" name="email" ng-model="userEmail" placeholder="email@domain.com"> 
      <span ng-show="emailForm.email.$invalid && emailForm.email.$dirty">invalid email</span> 
      <span ng-show="emailForm.$invalid">form invalid!</span> 
     </form> 
     <br/> 
     <button ng-click="clearViaUndefined()">clear via undefined</button> 
     <button ng-click="clearViaNull()">clear via null</button> 
     <button ng-click="clearViaEmptyString()">clear via empty string</button> 
    </div> 
</div> 

사용자가 잘못된 이메일을 입력하지만, 다음은 '취소'버튼을 클릭 가정 ... 그래서 양식의 요구를 재설정해야합니다.

'취소'버튼의 ng-click 처리기에서 모델의 값을 'undefined'로 설정하면 입력 요소의 $ valid 속성이 true로 변경되지 않습니다 (해당 양식의 경우도 마찬가지 임) .

function EmailCtrl($scope) { 

    $scope.clearViaUndefined = function() { 
     $scope.userEmail = undefined; 
    }; 

    $scope.clearViaNull = function() { 
     $scope.userEmail = null; 
    }; 

    $scope.clearViaEmptyString = function() { 
     $scope.userEmail = ""; 
    }; 
} 

모델의 값을 빈 문자열 ""또는 null로 설정하면 $ valid 속성은 다시 true로 설정됩니다.

왜 이런가요? 하나 $viewValue 등이다

http://jsfiddle.net/U3pVM/12830/

Answer 1

당신이 입력 또는 선택 태그에 NG 모델을 사용할 때마다이 각도는 내부적으로 필드에 두 개의 값을 관리합니다

은 내가 JS 바이올린 여기에 동작을 시연해야 $modelValue

$ viewValue입니다 -보기

$ modelValue-> 실제 값을 디스플레이 목적을 위해 사용> 범위 내에서 사용됩니다.

입력 태그를 type='email'과 함께 사용하는 경우 Angular는 입력 값의 유효성을 지속적으로 검사합니다.

값이 올바른 전자 메일로 유효성을 검사하지 않으면 내부적으로 각도가 $modelValue에서 undefined으로 설정되고 form.fieldName. $ error.fieldName 특성이 true로 설정됩니다. 그 필드는 invalid이됩니다.

컨트롤러 내부의 form.fieldName. $ modelValue 값을 확인하면 undefined으로 알 수 있습니다.

컨트롤러에서 모델을 '정의되지 않음'으로 설정하면 필드가 이미 유효하지 않은 경우 아무 것도 변경되지 않습니다. 다시 필드가 유효하고 -

하지만 null 또는 ""로 설정하는 경우가 $modelValue 및 $viewValue 모두로 작동이 변경 얻을.

희망 사항을 이해했습니다. 감사.

Answer 2

추가 NG-모델 옵션 = "{allowInvalid : TRUE}"입력 필드에

잘하면 유효 양식/입력을 할 것 undefined로 NG 모델 설정을 다시 시도

참조 : https://docs.angularjs.org/api/ng/directive/ngModelOptions