0

Here is my form which is working okay but there is 2 issues which confusing me

1) when user click on required input box and move away, it gives error below the text, but reset button is still disabled; how to enable reset button on error so that I can remove that error beneath input box. I have added

ng-disabled="movieForm.$pristine" ; on reset button; do I need to add anything else

2) when I write invalid entry in movie year box i.e. string instead of year than error appears; I click on reset button ; it clear the box value but than save button enabled. that is not desired.

Please help to fix this form issue

Improve this question

2 Answers 2

Reset to default
3

Change required to ng-required="true" and you're done.

EDIT:

For Reset button issue in my opinion you should just leave it enabled at all times. It doesn't help user in any way if it's disabled when form is empty.

The problem here is that you want to use this button to "hack" the behavior. After Reset the form is still invalid, you just want to hide the messages by setting $untouched. You can either add more logic to check if the form is invalid and empty, or just invalid, or was just reset etc. Or leave the button enabled and keep things simple. You can check how it works in updated plunker.

Corrected example

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

7 Comments

it does not fix my first issue so far; have you checked properly?
Please check my updated plunker and updated answer. ="true" part is needed for this to work ok.
no. it's not working bro; click on movie year input box and move away; reset button is disabled and error is shown. I want to reset that error
Okay. i have made reset button all time enable; but in your corrected example. once user save the movie. all error appears on form resetting.
You're plunker indeed behaves like this for me. But my plunker saves multiple movies ok (at least for me). Maybe compare carefully both plunkers and check if you implemented all my changes.
|
2

You need to do two things:

  1. To change your code of reset button, it should be:

             <input type="button" value="Reset" class="btn btn-info" ng-disabled="movieForm.$pristine && movieForm.mName.$untouched && movieForm.mStar.$untouched && movieForm.mYear.$untouched" ng-click="reset()"/>

  2. You need to change your reset function of controller, it should be like:

            $scope.reset = function() {
         $scope.movie = { name : '', star: '', year: ''};
         //setvalidity is removed
         $scope.movieForm.$setPristine();
         $scope.movieForm.$setUntouched();
     };
Improve this answer

4 Comments

thanks for fixing first issue. on second issue : validity is checked fine but when I click on reset button ; save button being enabled
Hi @pro.mean, I have fixed your bugs. I'am going to edit my answer. If you find this helpful, please mark my answer as correct answer
But using every form.element.untouched is not seems good approach. yes the removal of setvalidity fixed my other issue.
Of course it is not a good idea, but form has no such state to detect whether any of the field touched. So best way is to let reset button enabled all the time as suggested by @Episodex.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.