Angular.js - 在指令中设置 ng-pattern 时未定义 ngModel 值 [英] Angular.js - ngModel value is undefined when ng-pattern is set in directive

问题描述

可能已经回答了类似的问题(ng-pattern + ng-change)，但所有的回答都无法解决这个问题.

我有两个用于创建表单输入的复杂指令，一个用于控制名称、标签、验证器等的父指令和一个用于设置模式和输入类型特定内容的子指令.

但是，在设置模式时，当 ng-pattern 返回 false 时，我的模型上的值设置为 undefined.

指令:

<input-text type="tel"></input-text></input-wrapper>

生成的 HTML:

电话号码:<input type="text" name="phone"ng-model="值"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() {返回 {限制:'E'，要求:'ngModel'，范围:真实，链接:函数(范围、元素、属性、ngModel){scope.name = attrs.name;scope.label = attrs.label;scope.onChange = 函数 () {ngModel.$setViewValue(scope.value);};ngModel.$render = 函数 () {scope.value = ngModel.$modelValue;};}}}).directive('inputText', function() {返回 {限制:'E'，模板:'<label for="{{name}}">{{label}}:</label><input type="text" name="{{name}}" ng-model="值" ng-model-options="{ updateOn: \'blur\' }" ng-change="onChange()" ng-pattern="pattern">',链接:函数(范围、元素、属性){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 = 这个；vm.customer = {电话:'010203040506'};});

我做错了什么?

用例的代码笔:https://codepen.io/Yosky/pen/yVrmvw

解决方案

默认在 angular 如果验证器失败，未定义值分配给 ng-model，您可以更改此设置如下:

阅读此处了解详细文档

something similar may have been answered (ng-pattern + ng-change) but all responses were unable to fix this issue.

I have two imbricated directives for creating a form input, a parent directive to control name, label, validator etc. and a child directive to set pattern and input type specific stuff.

However, when setting a pattern, the value on my model is set to undefined when ng-pattern return false.

Directives:

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

Generated 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'
          };
        });

What am I doing wrong ?

Codepen for use case: https://codepen.io/Yosky/pen/yVrmvw

解决方案

By default in angular if a validator fail, undefined value assigned to ng-model, You can change this setting as follow :

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

read here for detail docs

这篇关于Angular.js - 在指令中设置 ng-pattern 时未定义 ngModel 值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！