50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import { Component, Input } from "@angular/core";
|
|
import { AbstractControl } from "@angular/forms";
|
|
import { UpperCaseFirstPipe } from "../../pipes/upper-case-first-pipe";
|
|
|
|
@Component({
|
|
selector: "app-error",
|
|
imports: [UpperCaseFirstPipe],
|
|
template: `
|
|
<div class="min-h-4">
|
|
@if (this.control && this.control.touched) {
|
|
@for (error of getErrorMessages(); track error) {
|
|
<p class="ml-2 text-xs text-red-400">{{ error | upperCaseFirst }}</p>
|
|
}
|
|
}
|
|
</div>
|
|
`,
|
|
})
|
|
export class Error {
|
|
@Input() control!: AbstractControl | null;
|
|
@Input() fieldName = "This field";
|
|
|
|
getErrorMessages() {
|
|
const messages: string[] = [];
|
|
|
|
if (this.control && this.control.errors) {
|
|
const errors = this.control.errors;
|
|
|
|
if (errors["required"]) {
|
|
messages.push(`${this.fieldName} is required.`);
|
|
}
|
|
if (errors["email"]) {
|
|
messages.push(`Please enter a valid email address.`);
|
|
}
|
|
if (errors["minlength"]) {
|
|
messages.push(
|
|
`${this.fieldName} must be at least ${errors["minlength"].requiredLength} characters.`,
|
|
);
|
|
}
|
|
if (errors["pattern"]) {
|
|
messages.push(`${this.fieldName} is formatted incorrectly.`);
|
|
}
|
|
if (errors["serverError"]) {
|
|
messages.push(errors["serverError"]);
|
|
}
|
|
}
|
|
|
|
return messages;
|
|
}
|
|
}
|