validate-form.component.ts

import { Component, OnInit } from '@angular/core';

import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { Router } from '@angular/router';

import { take } from 'rxjs/operators';
import { HttpErrorResponse } from '@angular/common/http';

import { ErrorService } from 'src/app/services/error.service';

import { NzSafeAny } from "ng-zorro-antd/core/types";
import { NzMessageService } from 'ng-zorro-antd/message';


@Component({
	selector: 'app-validate-form',
	templateUrl: './validate-form.component.html',
	styleUrls: ['./validate-form.component.css']
})

export class ValidateFormComponent implements OnInit {

	validateForm: FormGroup;
	today = new Date();
	loading: boolean = false;
	non_field_errors: Array<string> = Array();

	constructor(
		private fb: FormBuilder,
		private router: Router,
		private message: NzMessageService,
		private errorService: ErrorService
	) {
		const { required, email } = CustomValidators;
		this.validateForm = this.fb.group({
			name: ['', [required]],
			link: [],
			deadline: [this.today, [required]],
			contact_number: [],
			contact_email: ['', [email]],
		});
	}
  
  submitForm(formData: any): void {
		this.loading = true
		this.message.loading('Processing...', {nzDuration: 5000})
		for (const i in this.validateForm.controls) {
			this.validateForm.controls[i].markAsDirty();
			this.validateForm.controls[i].updateValueAndValidity();
		}
		let payload = {
			name: formData.name,
			link: formData.link,
			deadline: formData.deadline.toJSON().split("T")[0],
			contact_number: formData.contact_number,
			contact_email: formData.contact_email,
		}

		this.formService.addData(payload).pipe(take(1)).subscribe(
			(res) => {
				this.loading = false;
				this.message.remove();
				this.message.success('Data Added', {nzDuration: 5000})
				this.router.navigate(['/']);
			},
			(err) => {
				this.message.remove()
				this.onSubmitError(err, this.validateForm);
				this.loading = false;
			}
		)
	}

	protected onSubmitError(response: HttpErrorResponse, form: FormGroup) {
		let nonfielderrors = this.errorService.resolveServerErrors(response, form)
		if (nonfielderrors) {
			this.non_field_errors = nonfielderrors
		}
	}
}
    
export type CustomErrorsOptions = { en: string } & Record<string, NzSafeAny>;
export type CustomValidationErrors = Record<string, CustomErrorsOptions>;


export class CustomValidators extends Validators {

	static maxLength(maxLength: number): ValidatorFn {
		return (control: AbstractControl): CustomValidationErrors | null => {
			if (Validators.maxLength(maxLength)(control) === null) {
				return null;
			}
			return { maxlength: { en: `Max length is ${maxLength}` } };
		};
	}
}