ng-model 구문 분석/형식 지정에서 ng-pattern 사용

Question

ng-pattern과 ng-model 구문 분석을 함께 사용하여 각도 입력을 실제로 시도하려고합니다. regex101.com에서 ng-pattern으로 입력 한 정규 표현식을 사용할 수 있으며, 심지어 내 응용 프로그램에 기록해도 훌륭하게 작동합니다. 그러나 그것을 ng-pattern으로 사용할 때, 그럴 필요가 없을 때 내 입력이 무효라고 말하는 것입니다. ngModel이 $ parsers/ngModel. $ formatters와 관련하여 언제 ng-pattern이 그 일을하는지 궁금해합니다. 여기에 몇 가지 코드입니다 :

UI.directive('formatSeconds', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 

      var padZero = function (num, size) { 
       return ('00' + num).substr(-size); 
      }; 

      var formatSeconds = function (seconds) { 
       var min = Math.floor(seconds/60); 
       var sec = Math.floor(seconds % 60); 
       var ms = Math.round(((seconds % 60) - sec) * 1000); 
       return min + ':' + padZero(sec, 2) + ':' + padZero(ms, 3); 
      }; 

      var parseTime = function (time) { 
       time = time.split(':'); 
       var min = parseInt(time[0] || 0); 
       var sec = parseInt(time[1] || 0); 
       var ms = parseInt(time[2] || 0); 
       return min * 60 + sec + (ms/1000); 
      }; 

      ngModel.$parsers.push(parseTime); 
      ngModel.$formatters.push(formatSeconds); 
     } 
    }; 
}); 

여기 내 컨트롤러 내 정규식입니다 :

$scope.timeRegex = /^([0-9]+)?\:([0-5][0-9])\:?([0-9]{3})?$/; 

는 그리고 여기 내보기 관련 부분 :

<tbody ng-form name="syncForm"> 
    <tr class="timing-entry" ng-repeat="entry in scenario.syncManifest"> 
     <td> 
      <input type="text" ng-attr-name="{{'time' + $index}}" required ng-model="entry.time" format-seconds ng-pattern="timeRegex" /> 
     </td> 
    </tr> 
</tbody> 

다음은 ngModel 분석 지침입니다

entry의 시간은 초 단위이므로 포맷터는 0 : 00 : 000 형식으로 지정합니다. 그렇다면 ng-pattern이 시작되어 예라고 말하기를 바랐습니다! 유효한! 하지만 시간 속성을 구문 분석하기 전에 0.000 형식으로 여전히 실행중인 경우 궁금하네요.

Answer 1

각도 확인이 ng-model 값에 수행, 즉 말을하는 것입니다 :

• 값이 뷰에 입력되면, $parsers가 실행되고 입력 된 값이 저장된 방법 당신이 원하는로 변환됩니다 ng-model 이 경우, 초 수를 나타내는 숫자입니다. 그런 다음 ng-pattern이 해당 값에서 작동합니다. 유효성 검사를 통과하면 ng-model이 설정됩니다.
• 컨트롤러에서 값을 설정하면 값으로 ng-pattern이 작동합니다. $formatters이 실행되고 유효성 검사 결과에 관계없이 서식이 $viewValue으로 전송됩니다.

예를 들어, ng-pattern은 정수 값인 초 단위로 작동하며 형식화 된 값은 컨트롤에 표시되지 않습니다.