$setValidity inside modal controller [AngularJS]

Question

Inside modal controller I am trying to set up validator like this:

$scope.taskForm.start_date.$setValidity("date", false);

Here is my html:

<input name="start_date" id="startdate" ng-model="modal.project.startDate" type="date" class="form-control" required/>

           <!--VALIDATION-->
<span ng-show="taskForm.start_date.date">Something</span>

But this not working, I assume it isbecause modal.

Also I get this error in console:

TypeError: Cannot read property 'start_date' of undefined

EDIT:

Here is example what is problem, just uncomment line from Modal controller and see what is problem in console:

http://jsfiddle.net/9tasz57s/

cant see anything related to your question in the fiddle you have provided — Vineet 'DEVIN' Dev, Dec 11 '15 at 19:04

score 2 · Answer 1 · answered Dec 07 '15 at 19:05

2

It's more likely related to this bug https://github.com/angular-ui/bootstrap/issues/969

Try to upgrade ui-bootstrap to the latest greatest version and see if the problem still exists. If you cannot upgrade then in github's issue you will find several workarounds for this problem. Like https://github.com/9ci/angle-grinder/commit/a3a1bc4483e01eb235d13f29709d2fd2604a8ddc#L4R28

answered Dec 07 '15 at 19:05

luacassus

6,540
2
40
58

Could you show me how it work with jsfiddle, please read my main post edit? – Vladimir Dec 09 '15 at 23:59
Bootstrap might be the possible issue for sure. But new version doesnot work as well. Please check working code I posted but its a workaround. – Gary Dec 10 '15 at 04:07

Gary · Answer 2 · 2015-12-10T05:18:52.890

Updated:

The issue is unrelated to CamelCasing but inability of access form elements from bootstrap as from angularjs adirectly http://plnkr.co/edit/TD9Ecq (actual usage). Form elements access seem issue from within controller when loading. Correct usage of validity is also mentioned. But it is accessible from within expressions on an arbitrary data binding to form element while loading. Quite strange. Working code is provided. http://plnkr.co/edit/wjDjKXQ1CBI1YMzHZZOX .

  <form name="taskform" on-load="{{taskform.startdate.$error['date'] = true;}}">
      <!-- Alternative below - Correct Usage to check or setting  validity -->
      <!--  <form name="taskform" ng-valid="{{taskform.startdate.$valid = false;}}"> -->
      <!-- Alternative below - Alternative different behaviour shown by $error -->
      <!--  <form name="taskform" {{taskform.startdate.$error['date'] = true;}}> -->
        <input name="startdate"  type="date" ng-model="formmodel" class="form-control" required/>
        <span ng-show="!taskform.startdate.$error.date">Something<br/></span>
        <span ng-show="taskform.startdate.$error.date">Something<br/></span>
        <span ng-show="taskform.startdate.$valid">Something<br/></span>
        <span>Error Array: {{taskform.startdate.$error}} - Validity: {{taskform.startdate.$valid}}<br/></span>
        <button ng-click="setvalidity()">Set New Validity</button><br/>
  </form>

Please check if this helps. The behavior for different usages now has been added.

Could you show me how it work with jsfiddle, please read my main post edit? — Vladimir, Dec 09 '15 at 23:59

score 1 · Answer 3 · answered Dec 10 '15 at 05:35

This problem is fairly common, since the Controller is instantiated first before any html elements and directives are compiled, they shouldn't be available in the controller at all.

One common way of solving this problem is by accessing the taskForm through ng-init. Passing a scope function that accepts the taskForm as an argument, you can freely manipulate the form from there on. Additionally, add a timeout inside the callback to make sure that all directives have been compiled and available.

DEMO

Javascript

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, $timeout, customer) {

  $scope.customer = customer;

  $scope.init = function(form) {
    $timeout(function() {
        form.start_date.$setValidity('date', false);
    });
  };

});

HTML

<form name="taskForm" ng-init="init(taskForm)">
  <!-- contents -->
</form>

then set it to true? I think that would be very simple to do, unless you're thinking of another kind of implementation? — ryeballar, Dec 19 '15 at 04:03

score 1 · Answer 4 · edited May 23 '17 at 11:59

1

Acoording this post Accessing angular bootstrap modal form from controller I need use a trick using ng-init and $timeout for waits to form's object in the scope initialize the fields.

In the HTML

<form name="taskForm" ng-init="initModal(taskForm)">

In javascript Controller

$scope.initModal = function(form) {
    //Waits for form initialize fields on object
    $timeout(function(){
        form.start_date.$setValidity("date", false);
    },0);  
  };

My solution it's http://jsfiddle.net/9tasz57s/6/

edited May 23 '17 at 11:59

Community

1
1

answered Dec 10 '15 at 17:54

Gonzalo Pincheira Arancibia

3,483
1
23
42

But what if I want to change Validation to true? – Vladimir Dec 18 '15 at 21:21

score 1 · Answer 5 · answered Dec 11 '15 at 19:50

I haven't worked much with UI-bootstrap. But to me it appears that its scoping issue. The ng-template is giving you a template but has a scope different than your $modal's scope. Actually its a child of $modal's scope. It might be a bug from UI-Bootstrap's side.

So what I did is just applied a ng-controller directive inside the first div of your ng-template. And checked values inside your modal controller as well as my new formed controller(which is child of modal controller)

Here is my fiddle -

`http://jsfiddle.net/VineetDev/Lufcrh6h/`

Please look how the watch works inside each controller and you will see that its scoping issue.

Thanks

$setValidity inside modal controller [AngularJS]

5 Answers5