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>

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

I am new in angular and in the above code I am trying to reset my form after submit but when I click on submit form reset function not working. I have tried to solve issue with form.reset(); and this.form.reset(); function in angular but it throw an error i.e. Property 'reset' does not exist on type '{ name: any; email: any; password: any; confirm_password: any; }'. I don't know why this happening? Please help me.

Thank You

CodePudding user response：

After submitting the form set the form value to 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
    };
  }

CodePudding user response：

Change the HTML code like this,

<form (ngSubmit)="submitSignup(signupForm)" #signupForm="ngForm">
....
</form>

And in the submit function add like this,

submitSignup(signupForm: NgForm) {
    this.http.post(this.url "signup",this.form).subscribe(
      data=>this.handleResponse(data),
      error=>this.handleError(error)
    );
    signupForm.resetForm();
}

You can see the documentation here https://angular.io/api/forms/NgForm#resetform

CodePudding user response：

Please try

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