How to fix Error in email validator Angular - html

Question

I'm trying to create an email centre using the regex pattern but I'm getting an error in validator in HTML. Installed ngx-chips and angular-editor, imported all the modules and the dependencies
HTML-
<div class="row class-spacing">
<div class="col-2">To</div>
<div class="col-8 set-border">
<tag-input
[ngModel]="toEmails"
[displayBy]="'label'"
[identifyBy]="'label'"
[theme]="'bootstrap'"
name="toEmails"
placeholder="+ To"
[separatorKeyCodes]="[32, 188]"
secondaryPlaceholder="To"
[errorMessages]="errorMessages"
[validators]="validators"
[removable]="true"
>
<tag-input-dropdown
[dynamicUpdate]="false"
[zIndex]="10000"
[displayBy]="'label'"
[identifyBy]="'label'"
[showDropdownIfEmpty]="true"
>
<ng-template let-item="item" let-index="index">
{{ item.label }}
</ng-template>
</tag-input-dropdown>
</tag-input>
</div>
</div>
The TypeScript file-
export class EmailComponent implements OnInit {
public errorMessages = {
pattern: 'Email must be in format abc#abc.com',
};
public validators = (this.checkPattern);
#ViewChild('form', { static: false })
form!: NgForm;
public dataModel: any;
public editorTextCount = 0;
public isSubmitted: boolean = false;
public isFieldEmpty: boolean = false;
public isMaxLengthLimitReached: boolean = false;
public config: AngularEditorConfig = {
editable: true,
spellcheck: true,
height: '200px',
width: 'auto',
enableToolbar: true,
showToolbar: true,
placeholder: 'Enter your email',
fonts: [
{ class: 'arial', name: 'Arial' },
{ class: 'times-new-roman', name: 'Times New Roman' },
{ class: 'calibri', name: 'Calibri' },
],
sanitize: true,
toolbarPosition: 'top',
toolbarHiddenButtons: [
[],
['customClasses', 'insertImage', 'insertVideo', 'toggleEditorMode'],
],
};
body: any;
subject: any;
toEmails: any;
public formDetails = {
toEmails: '',
subject: '',
body: '',
};
public items = ['Pizza', 'Pasta', 'Parmesan'];
constructor() {}
ngOnInit() {}
public sendEmail(): void {
console.log(this.form.value);
}
private checkPattern(control: FormControl) {
const patternRegex = /^[A-Za-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$/;
if (patternRegex.test(control.value)) {
return console.log('Match exists.');
} else {
return { pattern: true };
}
}
}
The error I'm getting in the line-
[validators]="validators"
The error I'm getting-
Type '(control: FormControl) => void | { pattern: boolean; }' is not
assignable to type 'ValidatorFn[]'.

Answer 1

Implement a custom validator function requires:
Only one input argument is expected, which is of type AbstractControl. The validator function can obtain the value to be validated via the control.value property
The validator function needs to return null if no errors were found in the field value, meaning that the value is valid
If any validation errors are found, the function needs to return an object of type ValidationErrors
Reference: Angular Custom Form Validators: Complete Guide (How to write a Validator function section)
private checkPattern(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const patternRegex = /^[A-Za-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$/;
if (patternRegex.test(control.value)) {
console.log('Match exists.');
return null;
} else {
return { pattern: true };
}
};
}
Assign validators with a ValidatorFn array containing checkPattern ValidatorFn.
public validators = [this.checkPattern];