Cannot reset form

Question

I'm new to Angular and I have a simple retrieve password form with 1 email field and a submit button. I want to clear the form after the form has been submitted, but I can't seem to do it even after following tutorials/answers online.

I think it might be something I'm not understanding fundamentally, so if you could please let me know that would be great.

I'm using Angular v1.2.22

HTML (signin.forgotpassword.html)

<form name="forgotPasswordForm" class="form" role="form" ng-submit="forgetPasswordSubmit(forgetForm.email)" novalidate >
    <div>
        <label for="input-email" class="col-sm-2 control-label">Email</label>
        <div>
             <input name="email" ng-model="forgetForm.email" type="email" class="form-control" id="input-email" />               
        </div>
    </div>
    <div class="form-group">
        <div>
            <button name="submit" type="submit">Reset Password</button>
        </div>
    </div>
</form>

Angular (AuthController)

var forgetPasswordClear = function(){
    var defaultForm = {
        email: ''
    };
    // clear input            
    $scope.forgetForm = defaultForm; // Doesn't clear
   // set form as pristine
    $scope.forgotPasswordForm.$setPristine(); // Get Cannot read property '$setPristine' of undefined
};

$scope.forgetPasswordSubmit = function(email){
    forgetPasswordClear();
};

----------EDIT----------

I'm not sure if it's because my form is sitting in a different ui view? My structure looks something like this:

HTML

<section data-ng-controller="AuthController">
    <div data-ui-view>
        Some content in there originally
        <a ui-sref="signin.forgetpassword">Click here to get password</a>
    </div>
</section>

Ui router

.state('signin.forgotpassword', {
    url: '/signup/forgot-password',
    templateUrl: 'modules/core/templates/signin.forgotpassword.html'
})

Works fine for me (made a minor edit to change `$scope.forgetForm = defaulrForm`) http://plnkr.co/edit/fIADIXJxtOjwMPrYZNGz?p=preview Which version of angular..? — PSL, Sep 30 '14 at 23:25
Thanks @PSL, I've tried that but unfortunately still the same response. I'm using v1.2.22. — muudless, Oct 01 '14 at 00:26
works for me with 22 as well. What you mean by same response? Did you even check the demo posted? — PSL, Oct 01 '14 at 00:27
Thats possibly so the form does not contain the elements? You may want to inspect your html and replicate exact structure.? — PSL, Oct 01 '14 at 00:35
@PSL, so I should add a controller in "signin.forgotpassword.html"? i thought AuthController will be the parent controller :/ ? — muudless, Oct 01 '14 at 00:37

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

0

You set the wrong model:

Your model is 'forgetForm'

 <input name="email" ng-model="forgetForm.email" type="email" class="form-control" id="input-email" ng-pattern="/.+\@.+\..+/" autofocus required />

current:

$scope.forget = defaultForm;

should be:

$scope.forgetForm = defaultForm;

EDIT TO ADDRESS NEW PROBLEM

It's because this is a child scope.

You need to use event emitters and listeners.

$broadcast -- dispatches the event downwards to all child scopes, $emit -- dispatches the event upwards through the scope hierarchy.

Read more here: Working with $scope.$emit and $scope.$on

edited May 23 '17 at 12:28

Community

1
1

answered Oct 01 '14 at 00:02

Brian Noah

2,962
18
27

Thanks for pointing that out, unfortunately it didn't make any difference. I've updated my question with more information, could you please have a look? – muudless Oct 01 '14 at 00:32
Thank you, I haven't tried it yet, but I believe this should be the possible solution. Do i need to add a controller in "signin.forgotpassword.html" in order for $broadcast to work? – muudless Oct 01 '14 at 00:47

Cannot reset form

1 Answers1