使用 angular 提交后如何重置表单?
How to reset form after submit using angular?
signup.component.html
<form (ngSubmit)="submitSignup()" #signupForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" [(ngModel)]="form.name" [ngModelOptions]="{standalone: true}" required>
<small class="text-danger" [hidden]="!error.name">
{{error.name}}
</small>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" [(ngModel)]="form.email" [ngModelOptions]="{standalone: true}" required>
<small class="text-danger" [hidden]="!error.email">
{{error.email}}
</small>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="form.password" [ngModelOptions]="{standalone: true}" required>
<small class="text-danger" [hidden]="!error.password">
{{error.password}}
</small>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!form.name || !form.email || !form.password">Submit</button>
</form>
signup.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
public form = {
name: null,
email: null,
password: null
}
public url = "http://localhost/ang/projectAPI/api/";
constructor(private http:HttpClient) { }
public error:any = [];
public success = null;
ngOnInit(): void {
}
submitSignup() {
this.http.post(this.url+"signup",this.form).subscribe(
data=>this.handleResponse(data),
error=>this.handleError(error)
);
this.form.reset();
}
handleResponse(data:any){
this.success = data.message;
}
handleError(error:any){
this.error = error.error.errors;
}
}
我是 angular 的新手,在上面的代码中,我试图在提交后重置我的表单,但是当我点击提交时,表单重置功能不起作用。我试图解决 form.reset();
和 this.form.reset();
函数在 angular 中的问题,但它抛出了一个错误,即 Property 'reset' does not exist on type '{ name: any; email: any; password: any; confirm_password: any; }'
。我不知道为什么会这样?请帮助我。
谢谢
像这样更改 HTML 代码,
<form (ngSubmit)="submitSignup(signupForm)" #signupForm="ngForm">
....
</form>
然后在提交函数中添加这样的,
submitSignup(signupForm: NgForm) {
this.http.post(this.url+"signup",this.form).subscribe(
data=>this.handleResponse(data),
error=>this.handleError(error)
);
signupForm.resetForm();
}
提交表单后将表单值设置为空。
submitSignup() {
this.http.post(this.url+"signup",this.form).subscribe(
data=>this.handleResponse(data),
error=>this.handleError(error)
);
//set all value to null
this.form = {
name: null,
email: null,
password: null
};
}
请尝试
onSubmit() {
if (this.myform.valid) {
// code
this.myform.reset();
}
}
signup.component.html
<form (ngSubmit)="submitSignup()" #signupForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" [(ngModel)]="form.name" [ngModelOptions]="{standalone: true}" required>
<small class="text-danger" [hidden]="!error.name">
{{error.name}}
</small>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" [(ngModel)]="form.email" [ngModelOptions]="{standalone: true}" required>
<small class="text-danger" [hidden]="!error.email">
{{error.email}}
</small>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="form.password" [ngModelOptions]="{standalone: true}" required>
<small class="text-danger" [hidden]="!error.password">
{{error.password}}
</small>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!form.name || !form.email || !form.password">Submit</button>
</form>
signup.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
public form = {
name: null,
email: null,
password: null
}
public url = "http://localhost/ang/projectAPI/api/";
constructor(private http:HttpClient) { }
public error:any = [];
public success = null;
ngOnInit(): void {
}
submitSignup() {
this.http.post(this.url+"signup",this.form).subscribe(
data=>this.handleResponse(data),
error=>this.handleError(error)
);
this.form.reset();
}
handleResponse(data:any){
this.success = data.message;
}
handleError(error:any){
this.error = error.error.errors;
}
}
我是 angular 的新手,在上面的代码中,我试图在提交后重置我的表单,但是当我点击提交时,表单重置功能不起作用。我试图解决 form.reset();
和 this.form.reset();
函数在 angular 中的问题,但它抛出了一个错误,即 Property 'reset' does not exist on type '{ name: any; email: any; password: any; confirm_password: any; }'
。我不知道为什么会这样?请帮助我。
谢谢
像这样更改 HTML 代码,
<form (ngSubmit)="submitSignup(signupForm)" #signupForm="ngForm">
....
</form>
然后在提交函数中添加这样的,
submitSignup(signupForm: NgForm) {
this.http.post(this.url+"signup",this.form).subscribe(
data=>this.handleResponse(data),
error=>this.handleError(error)
);
signupForm.resetForm();
}
提交表单后将表单值设置为空。
submitSignup() {
this.http.post(this.url+"signup",this.form).subscribe(
data=>this.handleResponse(data),
error=>this.handleError(error)
);
//set all value to null
this.form = {
name: null,
email: null,
password: null
};
}
请尝试
onSubmit() {
if (this.myform.valid) {
// code
this.myform.reset();
}
}