Form is not valid after form.reset () - Angular2

Question

I have a template based template in my Angular2 application to register users. There, I pass the instance of the form to the Submit function and reset the value after making an asynchronous call on the server.

Below are some important parts of the form.

<form class="form-horizontal" #f="ngForm" novalidate (ngSubmit)="onSignUpFormSubmit(f.value, f.valid, newUserCreateForm, $event)" #newUserCreateForm="ngForm">

    <div class="form-group">
        <label class="control-label col-sm-3" for="first-name">First Name:</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" placeholder="Your First Name" name="firstName" [(ngModel)]="_userCreateForm.firstName"
                #firstName="ngModel" required>
            <small [hidden]="firstName.valid || (firstName.pristine && !f.submitted)" class="text-danger">
               First Name is required !
            </small>
        </div>
    </div>

    .......

    .......

    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-12">
            <button type="submit" class="btn btn-default">Submit</button>
            <button type="reset" class="btn btn-link">Reset</button>
        </div>
    </div>

</form>

In my component file, I wrote the following function.

onSignUpFormSubmit(model: UserCreateForm, isValid: boolean, form: FormGroup, event:Event) {

    event.preventDefault();

    if (isValid) {
        this._userEmail = model.email;

        this._authService.signUp(this._userCreateForm).subscribe(
            res => {
                console.log("In component res status = "+res.status);
                if(res.status == 201){
                    //user creation sucess, Go home or Login 
                    console.log("res status = 201");
                    this._status = 201;

                }else if(res.status == 409){
                    //there is a user for given email. conflict, Try again with a different email or reset password if you cannot remember
                    this._status = 409;
                }else{
                    //some thing has gone wrong, pls try again
                    this._serverError = true;
                    console.log("status code in server error = "+res.status);
                }

                form.reset();
                alert("async call done");
            }
        );
    }
}

If I submit an empty form, all checks are performed correctly. But when I submit a valid form, after the form submission and the asynchronous call to the server are completed, I again get all the form fields invalid.

See the following screenshots.

I can’t understand why this is happening. If I comment form.reset(), I will not get the problem. But the form contains old data that I submitted.

?

Answer 1

, :

function Submit(){
   ....
   ....
   // after submit to db

   // reset the form
  this.userForm.reset();

  // reset the errors of all the controls
  for (let name in this.userForm.controls) {
     this.userForm.controls[name].setErrors(null);
  }

}

Answer 2

, , submitted = false :

public onSignUpFormSubmit() {
    ...
    this.submitted = false;
    this._userCreateForm = new UserCreateForm();
}

Answer 3

javascript .

var form : HTMLFormElement = 
<HTMLFormElement>document.getElementById('id');
form.reset();

Answer 4

, , . Angular5.

= "firstFormGrop".

, :   <form #myNgForm="ngForm">

html doc:

<form [formGroup]="firstFormGroup">
<button mat-button (click)='$event.preventDefault();this.clearForm();'>
     <span class="font-medium">Create New</span>
</button>
</form>

.ts:

this.model = new MyModel();
this.firstFormGroup.reset();

# myNgForm = "ngForm:

myNgForm.reset();
// or this.myNgForm.reset()

, reset , reset , .

, : , .

, $event.preventDefault() , .

$event.preventDefault() - .

Answer 5

, , : Angular 5 FormGroup

, .

Answer 6

:

:

<form
  action=""
  [formGroup]="representativeForm"
  (submit)="register(myform)"
  #myform="ngForm"
>

*ngIf="registrationForm.get('companyName').errors?.required && myform.submitted"

:

register(form) {
  form.submitted = false;
}