$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
– Vineet 'DEVIN' Dev, Commented Dec 11, 2015 at 19:04

luacassus · Accepted Answer · 2015-12-07 19:05:04Z

2

+25

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 7, 2015 at 19:05

luacassus

6,7502 gold badges45 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vladimir Over a year ago

Could you show me how it work with jsfiddle, please read my main post edit?

Gary Over a year ago

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 · Accepted Answer · 2015-12-10 05:18:52Z

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?

ryeballar · Accepted Answer · 2015-12-10 05:35:42Z

1

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>

answered Dec 10, 2015 at 5:35

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

2 Comments

Vladimir Over a year ago

But what if I want to change Validation to true?

ryeballar Over a year ago

then set it to true? I think that would be very simple to do, unless you're thinking of another kind of implementation?

Community · Accepted Answer · 2017-05-23 11:59:09Z

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, 2017 at 11:59

CommunityBot

11 silver badge

answered Dec 10, 2015 at 17:54

Gonzalo Pincheira Arancibia

3,6332 gold badges26 silver badges44 bronze badges

1 Comment

Vladimir Over a year ago

But what if I want to change Validation to true?

Vineet 'DEVIN' Dev · Accepted Answer · 2015-12-11 19:50:52Z

1

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

answered Dec 11, 2015 at 19:50

Vineet 'DEVIN' Dev

1,2231 gold badge11 silver badges37 bronze badges

Collectives™ on Stack Overflow

$setValidity inside modal controller [AngularJS]

5 Answers 5

2 Comments

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related