form.resetForm is not a function in angular

Question

Why do I get the error of "form.resetForm is not a function" whenever I use the form.resetForm() in angular 7. This is how I implement it:

in the .component.ts

form: FormGroup;

constructor(
    private userService: UserService,
    private fb: FormBuilder,
  ) { }

ngOnInit() {
    this.createForm();
  }

createForm(): void {
    this.form = this.fb.group({
      firstName:  [null, Validators.required],
      middleName: [null],
      lastName:   [null, Validators.required],
      userName:   [null, Validators.required],
      password:   [null, Validators.compose([Validators.required, Validators.minLength(4)])],
      email: [null, Validators.pattern(this.emailRegex)]
    });
  }

onSubmit(form: NgForm) {
    const obj = Object.assign({}, this.form.value);
    Object.keys(obj).forEach(key => obj[key] == undefined || obj[key] == '' ? delete obj[key] : '');
    this.submitted = true;

    if (this.form.invalid) {
      return;
    }

    this.userService.postUser(form.value).subscribe(
      res => {
        this.showSucessMessage = true;
        setTimeout(() => this.showSucessMessage = false, 4000);
        this.userService.selectedUser = {
          firstName: '',
          lastName: '',
          middleName: '',
          email: '',
          userName: '',
          password: ''
        };
        form.resetForm();
        this.serverErrorMessages = '';
      },
      err => {
        if (err.status === 422) {
          this.serverErrorMessages = err.error.join('<br/>');
        } else {
          this.serverErrorMessages = 'Something went wrong.Please contact admin.';
        }
      }
    );
  }

This is in the .html

<form [formGroup]="form" (ngSubmit)="onSubmit(form)">
  <!-- Fist Name-->
  <input
    type="text"
    matInput
    formControlName="firstName"
    placeholder="First Name"
    required
    [ngClass]="{ 'invalid-textbox': form.submitted && !lastName.valid }"
  />
  <div *ngIf="submitted && f.firstName.errors">
    <div *ngIf="f.firstName.errors.required">
      <label class="validation-message">First Name is required</label>
    </div>
  </div>

  <!-- Middle Name-->
  <input
    type="text"
    matInput
    formControlName="middleName"
    placeholder="Middle Name"
  />

  <!-- Last Name-->
  <input
    type="text"
    matInput
    formControlName="lastName"
    placeholder="Last Name"
    required
    [ngClass]="{ 'invalid-textbox': form.submitted && !lastName.valid }"
  />
  <div *ngIf="submitted && f.lastName.errors">
    <div *ngIf="f.lastName.errors.required">
      <label class="validation-message">First Name is required</label>
    </div>
  </div>

  <!-- Fist Name-->
  <input
    type="text"
    matInput
    formControlName="userName"
    placeholder="Username"
    required
    [ngClass]="{ 'invalid-textbox': form.submitted && !lastName.valid }"
  />
  <div *ngIf="submitted && f.userName.errors">
    <div *ngIf="f.userName.errors.required">
      <label class="validation-message">Username is required</label>
    </div>
  </div>

  <!-- Email -->
  <input
    type="text"
    matInput
    formControlName="email"
    placeholder="Email"
    [pattern]="emailRegex"
    [ngClass]="{ 'invalid-textbox': form.submitted && !firstName.valid }"
  />
  <div *ngIf="submitted && f.email.errors">
    <div *ngIf="f.email.errors.pattern">
      <label class="validation-message">Invalid E-mail</label>
    </div>
  </div>

  <!-- Password -->
  <input
    type="password"
    matInput
    formControlName="password"
    placeholder="Password"
    required
    [ngClass]="{ 'invalid-textbox': form.submitted && !userName.valid }"
  />
  <div *ngIf="submitted && f.password.errors">
    <div *ngIf="f.password.errors.required">
      <label class="validation-message">Password is required</label>
    </div>
    <div *ngIf="f.password.errors.minlength">
      <label class="validation-message"
        >Password must atleast be 4 characters long.</label
      >
    </div>
  </div>

  <input type="submit" value="Sign Up" />
</form>

<!-- Success message -->
<div class="success" *ngIf="showSucessMessage">
  Saved successfully
</div>

<!-- Error message -->
<div class="alert" *ngIf="serverErrorMessages">
  {{ serverErrorMessages }}
</div>

I can use the form.reset() but the validation does not reset. I can see the validation errors in my input fields. I already imported the NgForm in my component and app.module.ts.Thank you.

Answer 1

One quick fix would be to set submitted to false upon submission. From what I can see, the validation messages only need to be shown after the user has clicked the submit button.

In addition, for this,

if (this.form.invalid) {
  return;
}

You should remove the return statement.

I have made the following changes below:

if (!this.form.invalid) {

  this.userService.postUser(form.value).subscribe(
    res => {
      this.showSucessMessage = true;
      setTimeout(() => this.showSucessMessage = false, 4000);
      this.userService.selectedUser = {
        firstName: '',
        lastName: '',
        middleName: '',
        email: '',
        userName: '',
        password: ''
      };
      form.resetForm();
      this.submitted = false;
      this.serverErrorMessages = '';
    },
    err => {
      if (err.status === 422) {
        this.serverErrorMessages = err.error.join('<br/>');
      } else {
        this.serverErrorMessages = 'Something went wrong.Please contact admin.';
      }
      this.submitted = false;
    }
  );
}