How to empty form after submitting in angular2

Question

I am trying to clear the form values after submitting it,i am using rc2 and i followed the method below but it is not working,

constructor(fbld: FormBuilder, http: Http, public router: Router) {
    this.http = http;
    this.form = fbld.group({
        firstname: ['', Validators.required],
        lastname: ['', Validators.required],
        profilename: ['', Validators.required],
        email: ['',emailValidator],
        password: ['', Validators.required],
        repeatpassword: ['', Validators.required],
        image: [''],
        phone: ['', phoneValidator],
        type: ['personal',],


    }, { validator: matchingPasswords('password', 'repeatpassword') });

}
hideeerror(email) {
    this.emailfailure = false;
}
hideperror(profile) {
    this.profilefailure = false;
}

onSubmit(form): any {

    console.log(form);
       form.reset();
    }
}

My template,

   <form id="login-form" name="login-form" class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value)" novalidate>
    <p *ngIf="activation" class="activation">We have sent an activation link to your email</p>
    <div class="form-group col-sm-offset-2">
           <label class="radio-inline">
                <input type="radio"  [formControl]="form.controls['type']" value = 'personal' name="optradio">Personal
            </label>
            <label class="radio-inline">
                <input type="radio"  [formControl]="form.controls['type']" value = 'professional' name="optradio">Professional
            </label>
    </div>
    <div class="form-group">
        <input type="text" [formControl]="form.controls['firstname']" id="login-form-firstnamee" name="login-form-firstname" value="" placeholder="First Name" class="sm-form-control not-dark formcontrolheight">



                                <span *ngIf="!form.controls['firstname'].valid" >
                                    <p class="nobottommargin error">{{nameerror}}</p>
                                </span>
    </div>

    <div class="clear"></div>
    <div class="form-group">
        <input type="text" [formControl]="form.controls['lastname']" id="login-form-password" name="login-form-password" value="" placeholder="Last Name" class="form-control not-dark formcontrolheight" >

<!--
        <span *ngIf="form.controls['lastname'].touched">
                                 <span *ngIf="!form.controls['lastname'].valid" >
                                    <p class="error">Field required</p>
                                </span>
        </span>-->
    </div>

    <div class="clear"></div>
    <div class="form-group">
        <input type="text" [formControl]="form.controls['profilename']" id="login-form-username" #profile (keyup)='hideperror(email.val)' name="login-form-username" value="" placeholder="User Name" class="form-control not-dark formcontrolheight" >
            <p class="nomargin error" *ngIf="profilefailure" >Profile name is already exists</p>



                                 <span *ngIf="!form.controls['profilename'].valid" >
                                    <p class="nobottommargin error">{{profileerror}}</p>
                                </span>

    </div>


    <div class="clear"></div>
    <div class="form-group">
        <input type="email" [formControl]="form.controls['email']" id="login-form-email" #email  (keyup)='hideeerror(email.val)' name="login-form-email" value="" placeholder="Email" class="form-control not-dark formcontrolheight" >
          <p class="nomargin error" *ngIf="emailfailure" >Email is already registered</p>



                                 <span *ngIf="form.controls['email'].touched || !form.controls['email'].valid">
                                      <span *ngIf="!form.controls['email'].valid">
                                   <p class="nomargin error">{{emailerror}}</p>
                                   </span>
                                </span>

    </div>

    <div class="clear"></div>
    <div class="form-group">
        <input type="password" [formControl]="form.controls['password']" id="login-form-password" #p2 name="login-form-password" value="" placeholder="Password" class="form-control not-dark formcontrolheight" >



                                 <span *ngIf="!form.controls['password'].valid" >
                                   <p class="nomargin error">{{passworderror}}</p>
                                </span>

    </div>

    <div class="clear"></div>
    <div class="form-group">
        <input type="password" [formControl]="form.controls['repeatpassword']" id="login-form-password" name="login-form-password" value="" placeholder="Repeat Password" class="form-control not-dark formcontrolheight" >


       <span *ngIf="form.controls['repeatpassword'].touched">
                                 <span  *ngIf="form.hasError('mismatchedPasswords')" >
                                    <p class="error">Confirm Password is not matching</p>
                                </span>
        </span>
    </div>

    <div class="clear"></div>
    <div class="col-sm-12 labeltopmargin nopadding">
        <button class="col-xs-12 button buttonmeroon button-mini   nomargin" id="login-form-submit" name="login-form-submit"  value="login">Sign Up for Socialwiki</button>
    </div>
    <div class="col-sm-12 topmargin-sm bottommargin-lg nopadding text-right pull-right">
     <button type="button" class="button button-small" style="background-color: #2A5BA9;">What is Socialwiki</button>
  </div>
    <div class="clear"></div>
</form>

I am trying to clear the form values after submitting it,i am using rc2 and i followed the method below but it is not working,

Possible duplicate of [Angular2 One-way binding form doesn't get cleared after data save](http://stackoverflow.com/questions/39105451/angular2-one-way-binding-form-doesnt-get-cleared-after-data-save) — Fabio Antunes, Aug 26 '16 at 13:36

score 0 · Answer 1 · answered Aug 26 '16 at 12:59

0

For RC2 you have to add ngIf to your form tag in HTML as below :

<form *ngIf="active">

After submit

onSubmit() {
  ....
  this.active = false;
  setTimeout(() => this.active = true, 0);
}

Check more detail on angular.io documentation

For RC5 you can use this.form.reset() method after submitting form.

answered Aug 26 '16 at 12:59

ranakrunal9

13,320
3
42
43

Ranakrunal,i added everything but due to the ngif in form tag the form itself is not getting displayed. – Aug 26 '16 at 13:06
Have you added active variable to your component ? if possible edit your question with your full component and html code here to get better idea. – ranakrunal9 Aug 26 '16 at 13:08
change your constructor code to use `this.form = this.fbld.group({})` and add public active: boolean = true; in your component. also check if you are getting any js error in console or not – ranakrunal9 Aug 26 '16 at 14:01
1

The *ngIf has nothing to do with it. It is simply intended as a check to decide whether to render the form in its entirety or not. IE when you submit, the form disappears, and you instead render "Form submitted sucessfully" or whatever. – Terje Aug 26 '16 at 16:41

How to empty form after submitting in angular2

1 Answers1