Angular: $setPristine on Form and Checkbox Issue

Question

I've got a form that doesn't allow you to check checkboxes on the first entry, which is very weird. It's almost like it doesn't register the click.

If however, you submit the form and try and check the same checkboxes after submitting the first form, it allows you to check the checkboxes. Why is this?

This is what my checkboxes look like:

<label ng-repeat="sector in sectors" for="{{sector}}">
  <input type="checkbox" id="{{sector}}" value="{{sector}}" ng-model="newService.sectors[sector]">{{sector}}
</label>

I'm also trying to work out how to implement $setPristine on this form so it gives the form a class of .ng-pristine when submitted.

I'm very new to Angular and am slowly trying to understand how this all works.

I've set up a Fiddle here: http://jsfiddle.net/nh63w6e0/2/

Any help is appreciated. Thanks in advance!

The fiddle is loading Angular twice, once from the "Frameworks and Extensions" menu and once from the "External Resources". Remove one and it works, regarding the "uncheckable" checkboxes. — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Oct 15, 2014 at 15:01
@NikosParaskevopoulos I've removed the External Resources Angular include, but checkboxes still aren't working. jsfiddle.net/nh63w6e0/5 — realph
– realph, Commented Oct 15, 2014 at 15:27

Rafael Eyng · Accepted Answer · 2014-10-16 01:42:05Z

1

The Problem

Using your JSFiddle example, if you look at the console while clicking in the checkbox, you'll see the error:

Cannot set property 'health' of undefined

That's because $scope.newService wasn't created, and you were trying to do something equivalent to $scope.newService['health'] = true while checking the checkbox. So, as you can see, $scope.newService was undefined.

The Solution

You should add a call to resetCreateForm to initialize your $scope.newService property.

JSFiddle (check out the last line, with the comment)

Edit:

Addressing your need to use the $setPristine, you could check this JSFiddle out.

All you have to do is add the name attribute on the form and call it as a $scope property by its name. Then you call the $setPristine() on the form property.

edited Oct 16, 2014 at 1:42

answered Oct 15, 2014 at 17:45

Rafael Eyng

4,9702 gold badges37 silver badges37 bronze badges

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

5 Comments

realph Over a year ago

Ahh, I thought having $scope.createService = createService would initialise resetCreateForm which is inside it. Am I wrong? Also, do you know how I would go about using $setPristine on this form when it's reset? Thanks for the Fiddle.

Rafael Eyng Over a year ago

The $scope.createService = createService is only assigning to the $scope.createService property a reference to the local function createService. It won't execute the function, so the call resetCreateForm() inside of createService won't happen.

Rafael Eyng Over a year ago

And I didn't understand your question about the $setPristine, if you could try again in other words.

realph Over a year ago

Sorry if I didn't explain properly. I'm trying to work out how to $setPristine on this form when it's been submitted. The form has a class of .ng-pristine when I load the page, but once I check a checkbox the class changes to .ng-dirty. I was trying to work out how to set the form to its pristine state with $setPristine. I hope that makes sense. Oh! And thank you for a well-described answer. Marked!

realph Over a year ago

Ahh, that makes sense. Also, I didn't realise you could call a {{$pristine}} expression to check whether the form was pristine or not. Thanks for this. Majorly helpful.

Collectives™ on Stack Overflow

Angular: $setPristine on Form and Checkbox Issue

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related