Angular.js - ngModel値がNGパターンが指令

Question

に設定されている場合にも同様の何かが回答されている可能性があり（NG-パターン+ NG-変化する）が、すべての応答がこの問題を解決することができませんでした定義されていません。

私はバリなどの名前、ラベル、およびパターンと入力タイプの特定のものを設定するには、子ディレクティブを制御するために、フォームの入力、親ディレクティブを作成するには2つの入り組んだディレクティブを持っています。

パターンを設定するときにNG-パターンがfalseを返すときしかし、私のモデルの値はundefinedに設定されています。

ディレクティブ：

<input-wrapper ng-model="vm.customer.phone" name="phone" label="Phone number"> 
    <input-text type="tel"></input-text> 
</input-wrapper> 

生成されたHTML：

<label for="phone">Phone number:</label> 
<input type="text" name="phone" 
    ng-model="value" 
    ng-model-options="{ updateOn: \'blur\' }" 
    ng-change="onChange()" 
    ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/"> 

JS：

angular.module('components', []) 
    .directive('inputWrapper', function() { 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     scope: true, 
     link: function (scope, element, attrs, ngModel) { 
      scope.name = attrs.name; 
      scope.label = attrs.label; 

      scope.onChange = function() { 
      ngModel.$setViewValue(scope.value); 
      }; 

      ngModel.$render = function() { 
      scope.value = ngModel.$modelValue; 
      }; 
     } 
    } 
    }) 
    .directive('inputText', function() { 
    return { 
     restrict: 'E', 
     template: '<label for="{{name}}">{{label}}:</label><input type="text" name="{{name}}" ng-model="value" ng-model-options="{ updateOn: \'blur\' }" ng-change="onChange()" ng-pattern="pattern">', 
     link: function (scope, element, attrs) { 

      if (attrs.type === 'tel') { 
      scope.pattern = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/; 
      } 
     } 
    } 
    }); 

angular.module('app',['components']) 
     .controller('ctrl',function($scope){ 
      var vm = this; 

      vm.customer = { 
      phone: '010203040506' 
      }; 
     }); 

私が間違って何をしているのですか？ユースケースのための

Codepen：角度でデフォルトでhttps://codepen.io/Yosky/pen/yVrmvw

Answer 1

バリデータが失敗した場合、NG-モデルに割り当てられた未定義の値、あなたは次のようにこの設定を変更することができます

<div ng-model-options="{ allowInvalid: true}"> 

read here for detail docs