funky-framadate-front/src/app/features/shared/components/ui/form/errors-list/errors-list.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, ValidationErrors } from '@angular/forms';

@Component({
	selector: 'app-errors-list',
	templateUrl: './errors-list.component.html',
	styleUrls: ['./errors-list.component.scss'],
})
export class ErrorsListComponent implements OnInit {
	@Input() form: FormGroup;
	public totalErrors = 0;
	public messages = [];

	ngOnInit() {
		this.form.valueChanges.subscribe((data) => {
			this.getFormValidationErrors();
		});
	}

	getFormValidationErrors(): void {
		// console.log('%c ==>> Validation Errors: ', 'color: red; font-weight: bold; font-size:25px;');

		let totalErrors = 0;
		this.messages = [];

		Object.keys(this.form.controls).forEach((key) => {
			const theKey = this.form.get(key);
			const invalidData = theKey.invalid;
			if (invalidData) {
				totalErrors++;
				console.log('key', key, invalidData);
				this.messages.push('' + key + ' est invalide');
			}
			const controlErrors: ValidationErrors = theKey.errors;
			if (controlErrors != null) {
				console.log('controlErrors', controlErrors);
				totalErrors++;
				Object.keys(controlErrors).forEach((keyError) => {
					const message = '' + key + ', ' + keyError + '';
					console.log(
						'Key control: ' + key + ', keyError: ' + keyError + ', err value: ' + controlErrors[keyError]
					);
					this.messages.push(message);
				});
			}
		});
		this.totalErrors = totalErrors;

		if (totalErrors) {
			console.log('Number of errors: ', totalErrors);
		}
	}
}