我正在尝试在提交后清除表单值,我使用的是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,我按照下面的方法操作,但它不起作用,
答案 0 :(得分:0)
对于RC2,您必须在HTML中将ngIf添加到表单标记中,如下所示:
<form *ngIf="active">
提交后
onSubmit() {
....
this.active = false;
setTimeout(() => this.active = true, 0);
}
的更多详情
对于RC5,您可以在提交表单后使用this.form.reset()
方法。