I am encountering an issue with validating the sign-in form as it is showing an error stating onSubmit is not defined. Below is the code snippet:
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();
}
}
}
Here is the HTML segment:
<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 could be causing this error? I have researched similar examples online and they seem to match my implementation. I have ensured there are no spelling errors since onSubmit is consistent in both the HTML and TypeScript files. How can I resolve this issue?