如何在angular2中提交后清空表单

Question

我正在尝试在提交后清除表单值，我使用的是rc2，我按照下面的方法操作，但它不起作用，

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();
    }
}

我的模板，

   <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>

我正在尝试在提交后清除表单值，我使用的是rc2，我按照下面的方法操作，但它不起作用，

Answer 1

对于RC2，您必须在HTML中将ngIf添加到表单标记中，如下所示：

<form *ngIf="active">

提交后

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

查看angular.io documentation

的更多详情

对于RC5，您可以在提交表单后使用this.form.reset()方法。