Handy functions to manipulate forms in Angular

forms.ts

import { FormGroup, FormControl, FormArray } from '@angular/forms';

export function markFormGroupDirty(formGroup: FormGroup) {
    (<any>Object).values(formGroup.controls).forEach((control: FormControl) => {
        if (control instanceof FormArray) {
            (control as FormArray).controls.forEach((c: FormGroup) => {
                markFormGroupDirty(c);
            });
        } else {
            control.markAsDirty();
        }
    });
}

export function getErrorMessage(errorsObj: Object, defaultMessage: string) {
    for (const key in errorsObj) {
        if (typeof errorsObj[key] === 'string') {
            return errorsObj[key];
        }
    }
    return defaultMessage;
}

export function createFormData(
    object: Object,
    form?: FormData,
    namespace?: string,
    fileNamePrefix: string = ''
): FormData {
    const formData = form || new FormData();

    for (const property in object) {
        if (!object.hasOwnProperty(property) || object[property] === null || typeof object[property] === 'undefined') {
            continue;
        }

        const formKey = namespace ? `${namespace}[${property}]` : property;

        if (object[property] instanceof Date) {
            formData.append(formKey, object[property].toISOString());
        } else if (typeof object[property] === 'object' && !(object[property] instanceof File)) {
            createFormData(object[property], formData, formKey, fileNamePrefix);
        } else if (typeof object[property] === 'object' && object[property] instanceof File) {
            formData.append(formKey, object[property], fileNamePrefix + object[property].name);
        } else {
            formData.append(formKey, object[property]);
        }
    }

    return formData;
}

export function cleanEmptyProperties(obj: Object): Object {
    const cleanArray = (arr: any[]) => {
        for (let i = 0; i < arr.length; i++) {
            if (
                arr[i] === null ||
                // arr[i] === '' ||
                arr[i] === undefined ||
                (arr[i].toString() === 'NaN' && typeof arr[i] !== 'string')
            ) {
                arr.splice(i, 1);
            }
        }
        return arr;
    };

    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (obj[key] && typeof obj[key] === 'object' && obj[key].hasOwnProperty('length')) {
                cleanArray(obj[key]);
            } else if (obj[key] && typeof obj[key] === 'object' && !obj[key].hasOwnProperty('length')) {
                cleanEmptyProperties(obj[key]);
            } else if (
                obj[key] === null ||
                // obj[key] === '' ||
                obj[key] === undefined ||
                (obj[key].toString() === 'NaN' && typeof obj[key] !== 'string')
            ) {
                delete obj[key];
            }
        }
    }

    return obj;
}

password.validator.ts

import { ValidatorFn, AbstractControl } from '@angular/forms';

/**
 * https://www.thepolyglotdeveloper.com/2015/05/use-regex-to-test-password-strength-in-javascript/
 *      ^ The password string will start this way
        (?=.*[a-z])	The string must contain at least 1 lowercase alphabetical character
        (?=.*[A-Z])	The string must contain at least 1 uppercase alphabetical character
        (?=.*[0-9])	The string must contain at least 1 numeric character
        (?=.[!@#\$%\^&]) The string must contain at least one special character,
            but we are escaping reserved RegEx characters to avoid conflict
        (?=.{8,})	The string must be eight characters or longer
 */

export function passwordValidator(minLength: number): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
        const passwordRegex = new RegExp(`^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{${minLength},})`);

        return passwordRegex.test(control.value) ? null : { error: `Password doesn't meet security requirements` };
    };
}

export function requiredValidator(errorMessage: string): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
        return control.value !== '' ? null : { error: errorMessage };
    };
}