ngModel undefined when using directive - Angularjs controller

Question

My ngModel is undefined when using the ngPattern directive. If I remove ngPattern, the ngModel works as expected. See plnkr.

Note how vm.condition does not show when typing a value in the text box, but as soon as the ngPattern is removed, vm.condition shows as expected.

HTML

<body ng-controller="MainCtrl as vm">
    <div ng-form="vm.frmTest">
      <input id="txtHealth" name="txtHealth" type="text" ng-model="vm.condition" ng-pattern="/^(.+)$/g">
      <div class="help-block" ng-messages="vm.frmTest.txtHealth.$error" ng-show="vm.frmTest.txtHealth.$invalid">
        <p ng-message="pattern">Error.</p>
      </div>
    </div>
    <span>{{vm.condition}}</span>
</body>

JS

app.controller('MainCtrl', function($scope) {
    this.condition = '';
});

NOTE: This is a dumbed down version showing the issue. My directive is showing the same issue.

You should use just pattern in this case

Icycool
– Icycool

2016-11-18 04:18:10 +00:00
Commented Nov 18, 2016 at 4:18 — Icycool
– Icycool, Commented Nov 18, 2016 at 4:18
does my answer help your need??

Sunil Lama
– Sunil Lama

2016-11-18 04:35:01 +00:00
Commented Nov 18, 2016 at 4:35 — Sunil Lama
– Sunil Lama, Commented Nov 18, 2016 at 4:35

Sunil Lama · Accepted Answer · 2016-11-18 04:22:52Z

It is probably because of the pattern string that you are using in your directive. Try having a $scope bind and check your directive. You can check the relative PLUNKER example here:

Demo Example

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-messages.js"></script>
        <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl as vm">
    <div ng-form="vm.frmTest">
      <input id="txtHealth" name="txtHealth" type="text" ng-model="vm.condition" ng-pattern="re">
      <div class="help-block" ng-messages="vm.frmTest.txtHealth.$error" ng-show="vm.frmTest.txtHealth.$invalid">
        <p ng-message="pattern">Error.</p>
      </div>
    </div>
    <span>{{vm.condition}}</span>
  </body>

</html>

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  this.condition = '';
  $scope.re = /^(.+)$/g;
});

Danila Ganchar · Accepted Answer · 2016-11-18 08:19:23Z

0

If you're going to use vm on the view then you will need to declare vm on your controller.

var vm = this;

edited Nov 18, 2016 at 8:19

Danila Ganchar

11.4k13 gold badges68 silver badges102 bronze badges

answered Nov 18, 2016 at 8:13

user9178

11 bronze badge

Collectives™ on Stack Overflow

ngModel undefined when using directive - Angularjs controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related