Using a variable for ng-required doesn't re-evaluate fields

Question

I have a form where my intent is for required fields to not always be enforced. For example if the user is saving the document as a draft they can enter as little information as they like, if they try and publish the document then they have to enter all the required fields. I'm using a boolean on the controller which changes according to which button has been pressed e.g.

<input type="text" ng-model="field2" ng-required="enforceRequired" />

The problem is that the fields are not re-evaluated when the boolean changes so the form is submitted and then it becomes invalid. Please see this JSFiddle to see what I mean. If you fill in field1 and then click publish it will succeed on the first click and THEN become invalid.

How can I force the validation to run before the form is submitted?

Umur Kontacı · Accepted Answer · 2015-01-14 14:55:32Z

1

Yarons is right, you are changing the value too late, by late I mean after the form validations has been run. What you can do as a workaround is, after changing the required value, let angular do another cycle and then show your alert. This can be done via $timeout service, although I must mention that it is usually not a good practise to change the flow of your digest actions. It gets pretty messy pretty soon.

Change your publish function like this (and don't forget to inject $timeout)

$scope.publish = function () {
    $scope.enforceRequired = true;

    $timeout(function () {
        if ($scope.form.$valid) {
            alert("Published!");
        }
    });
};

Working fiddle: http://jsfiddle.net/bh9q00Le/14/

answered Jan 14, 2015 at 14:55

Umur Kontacı

35.5k8 gold badges76 silver badges96 bronze badges

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

1 Comment

user3546309 Over a year ago

I ended up using this solution. Thanks

Yaron Schwimmer · Accepted Answer · 2015-01-14 14:55:17Z

1

The problem is that you are changing the value of enforceRequired in the middle of the digest loop, so the watchers are not re-rendered before you check the input fields' validity (read about digest here).

If you want to get around it, I suggest one of the following methods:

change the value of enforceRequired before you call saveDraft or publish. see example.
call $scope.$apply() after you change the value of enforceRequired. see another example.

edited Jan 14, 2015 at 14:55

answered Jan 14, 2015 at 14:47

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

3 Comments

user3546309 Over a year ago

$scope.$apply() was the best solution for me. Thanks very much.

user3546309 Over a year ago

I've actually just noticed that this causes errors in the console (Error: $apply already in progress). Is there any way around this?

Yaron Schwimmer Over a year ago

I don't think there is a way around it. you can use safe apply, but it will cause the whole workaround not to work... That's why I suggested another approach.

Collectives™ on Stack Overflow

Using a variable for ng-required doesn't re-evaluate fields

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related