fuse-angular/src/app/main/pages/coming-soon/coming-soon.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { FuseConfigService } from '@fuse/services/config.service';
import { fuseAnimations } from '@fuse/animations';

@Component({
    selector   : 'coming-soon',
    templateUrl: './coming-soon.component.html',
    styleUrls  : ['./coming-soon.component.scss'],
    animations : fuseAnimations
})
export class ComingSoonComponent implements OnInit, OnDestroy
{
    comingSoonForm: FormGroup;
    comingSoonFormErrors: any;

    // Private
    private _unsubscribeAll: Subject<any>;

    /**
     * Constructor
     *
     * @param {FuseConfigService} _fuseConfigService
     * @param {FormBuilder} _formBuilder
     */
    constructor(
        private _fuseConfigService: FuseConfigService,
        private _formBuilder: FormBuilder
    )
    {
        // Configure the layout
        this._fuseConfigService.config = {
            layout: {
                navbar   : {
                    hidden: true
                },
                toolbar  : {
                    hidden: true
                },
                footer   : {
                    hidden: true
                },
                sidepanel: {
                    hidden: true
                }
            }
        };

        // Set the defaults
        this.comingSoonFormErrors = {
            email: {}
        };

        // Set the private defaults
        this._unsubscribeAll = new Subject();
    }

    // -----------------------------------------------------------------------------------------------------
    // @ Lifecycle hooks
    // -----------------------------------------------------------------------------------------------------

    /**
     * On init
     */
    ngOnInit(): void
    {
        this.comingSoonForm = this._formBuilder.group({
            email: ['', [Validators.required, Validators.email]]
        });

        this.comingSoonForm.valueChanges
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe(() => {
                this.onRegisterFormValuesChanged();
            });
    }

    /**
     * On destroy
     */
    ngOnDestroy(): void
    {
        // Unsubscribe from all subscriptions
        this._unsubscribeAll.next();
        this._unsubscribeAll.complete();
    }

    // -----------------------------------------------------------------------------------------------------
    // @ Public methods
    // -----------------------------------------------------------------------------------------------------

    /**
     * On form values changed
     */
    onRegisterFormValuesChanged(): void
    {
        for ( const field in this.comingSoonFormErrors )
        {
            if ( !this.comingSoonFormErrors.hasOwnProperty(field) )
            {
                continue;
            }

            // Clear previous errors
            this.comingSoonFormErrors[field] = {};

            // Get the control
            const control = this.comingSoonForm.get(field);

            if ( control && control.dirty && !control.valid )
            {
                this.comingSoonFormErrors[field] = control.errors;
            }
        }
    }
}