使用角度提交后如何重置表單？

signup.component.html

<form (ngSubmit)="submitSignup()" #signupForm="ngForm">
  <div >
    <label for="name">Name</label>
    <input type="text"  id="name" name="name" [(ngModel)]="form.name" [ngModelOptions]="{standalone: true}" required>
    <small  [hidden]="!error.name">
      {{error.name}}
    </small>
  </div>

  <div >
    <label for="email">Email address</label>
    <input type="email"  id="email" name="email" [(ngModel)]="form.email" [ngModelOptions]="{standalone: true}" required>
    <small  [hidden]="!error.email">
      {{error.email}}
    </small>
  </div>

  <div >
    <label for="password">Password</label>
    <input type="password"  id="password" name="password" [(ngModel)]="form.password" [ngModelOptions]="{standalone: true}" required>
    <small  [hidden]="!error.password">
      {{error.password}}
    </small>
  </div>

  <button type="submit"  [disabled]="!form.name || !form.email || !form.password">Submit</button>
</form>

注冊組件.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;
  }
}

我是角度新手，在上面的代碼中，我試圖在提交后重置我的表單，但是當我點擊提交表單時，重置功能不起作用。我試圖用角度解決問題form.reset();和this.form.reset();功能，但它會拋出一個錯誤，即Property 'reset' does not exist on type '{ name: any; email: any; password: any; confirm_password: any; }'. 我不知道為什么會這樣？請幫我。

謝謝你

uj5u.com熱心網友回復：

提交表單后，將表單值設定為 null。

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

uj5u.com熱心網友回復：

像這樣更改 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();
}

您可以在此處查看檔案https://angular.io/api/forms/NgForm#resetform

uj5u.com熱心網友回復：

請試試

onSubmit() {
   if (this.myform.valid) {
      // code
      this.myform.reset();
  }
}

標籤：有角度的 形式 重置 角12

上一篇：Java：從私有方法呼叫公共事務方法

下一篇：<form>動作不是相對的