set value from js to element with ng required not set frm.$error.required to false

Question

I have a button and ng-style that depends on frm.mybtn.$error.required like this:

ng-style="frm.mybtn.$error.required?{'border-color':'#a94442'}:''"

and I set the value of the button from the javascript,
But angular didn't notice that the required is now false
and frm.mybtn.$error.required is still set to true

Finally, I found the solution in another question, I addad .change() and it worked: $('[id="' + id + '"]').prop('value',element[0].files[0].name).change(); — matan, Mar 23 '17 at 09:36

score 0 · Answer 1 · edited May 23 '17 at 12:25

0

You need to run the javascript code inside scope digest as below

$scope.$apply(code to set value)

Or if you have current scope object then

  $scope.$digest(code to set value)

For more detail ref How do I use $scope.$watch and $scope.$apply in AngularJS?

edited May 23 '17 at 12:25

Community

1
1

answered Mar 22 '17 at 07:51

Aravind Sivam

1,089
8
23

if I do this it throw an error:$digest is allready in progress . this is my code (inside a directive) : $('[id="' + id + '"]').prop('value', "text"); – matan Mar 22 '17 at 09:12

score 0 · Answer 2 · answered Mar 22 '17 at 07:58

0

You can try this, its work for me

ng-style="form_user.vEmail.$error.required == true ? {'border-bottom':'1px solid #FF2723'}:''"

answered Mar 22 '17 at 07:58

Ashish Kadam

1,439
2
13
18

but ,do you set the value from the js? the required field is still true!! – matan Mar 22 '17 at 11:05
can you plz show your entire code plunker or codepen – Ashish Kadam Mar 23 '17 at 07:56

score 0 · Answer 3 · answered Mar 22 '17 at 08:33

You could also use the ng-class directive, which would be better for code reusability. So, you would end up with a class containing your desired styles, and your HTML would look like this:

<input type="text" ng-model="email" name="email" ng-required="true" ng-class="{ 'required': myForm.email.$error.required }"/>

Also, if you want to apply the style only after the user has input anything, check the $dirty variable:

<input type="text" ng-model="email" name="email" ng-required="true" ng-class="{ 'required': myForm.email.$dirty && myForm.email.$error.required }"/>

See this codepen.

Indeed, I left a typo in the codepen. It's fixed now. – SinDeus Mar 23 '17 at 14:33 — SinDeus, Mar 23 '17 at 14:33

set value from js to element with ng required not set frm.$error.required to false

3 Answers3