CODEWITHSUNDEEP
angulartypescript
user8978302
user8978302

Reputation:

onSubmit is not defined (Angular 6)

I am trying to validate sign in form while it says onSubmit is not defined. Here is the code:

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-customer-signin',
  templateUrl: './customer-signin.component.html',
  styleUrls: ['./customer-signin.component.css']
})
export class CustomerSigninComponent implements OnInit {
   customerSigninForm: FormGroup;

  constructor() {}

  ngOnInit() {
   this.customerSigninForm = new FormGroup({
       'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
       'pwd': new FormControl(null, [Validators.required,
       Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')
        ]);
     });

  onSubmit() {
    console.log(this.customerSigninForm);
    this.customerSigninForm.reset();
  }
}

}

Also here is the HTML part:

<form action="" [formGroup]="customerSigninForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="email" type="text" id="email" formControlName="email"/>
            <span *ngIf="!customerSigninForm.get('email').valid && customerSigninForm.get('email').touched" class="help-block">Please enter a valid email!</span>
        </div>
        <div class="form-group">
            <input class="form-control form-control-lg" placeholder="Password" type="password" formControlName="pwd"/>
            <span *ngIf="!customerSigninForm.get('pwd').valid && customerSigninForm.get('pwd').touched" class="help-block">Please enter a valid password!</span>
        </div>
        <div class="form-group">
            <div class="extra-btns align-items-center">
                <button class="btn btn-link ">Forget Password</button>
                <button class="btn btn-link ">Forget Password</button>
            </div>
            <div>
                <span
          *ngIf="!customerSigninForm.valid && customerSigninForm.touched"
          class="help-block">Please enter valid data!</span>
                <button type="submit" class="  btn form-btn btn-lg btn-block">Sign In With Email</button>
                      </div>
        </div>
    </form>

What is wrong? Why does it throw that error? I found many examples on the internet and all of them look like this. I assume there is no spelling error since on HTML and typescript onSubmit is written by the same way. How can I fix this issue?

Upvotes: 3

Views: 4792

Answers (2)

Sachin Shah
Sachin Shah

Reputation: 4533

You put your onSubmit() function inside the ngOnInit().

Please try to put it out side of ngOnInit().

For example: 

ngOnInit(){
   // Do something 
}
OnSubmit(){
   // save data 
}

It works for me. I hope it's for you also.

Upvotes: 1

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

You need to define onSubmit function out of ngOnInit function block. Just have a look to angular-lifecycle-hooks

Try this

ngOnInit() {
   this.customerSigninForm = new FormGroup({
       'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
       'pwd': new FormControl(null, [Validators.required,
       Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')
        ]);
     });
}

onSubmit() {
    console.log(this.customerSigninForm);
    this.customerSigninForm.reset();
}

Upvotes: 3

Related Questions