ADAM / AIAHTML5

import { Component, AfterViewInit, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ApplicationService } from '../services/application.service';
//import { OnlyNumber } from '../components/shared/only-number-validator.directive';
//import { EmailValidator } from '../components/shared/email-validator.directive';
//import { forbiddenNameValidator } from '../components/shared/forbidden-name-validator.directive';

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

declare var jQuery: any;

@Component({
    templateUrl: './app/components/add-new-license.component.html'
})
export class AddNewLicenseComponent implements AfterViewInit, OnInit {

    //addNewLicenseForm: FormGroup;

    addNewLicenseForm = new FormGroup({
        licenseType: new FormControl(),
        accountNo: new FormControl(),
        licenseeFirstName: new FormControl(),
        licenseeLastName: new FormControl(),
        accountType: new FormControl(),
        institutionName: new FormControl(),
        address: new FormControl(),
        city: new FormControl(),
        state: new FormControl(),
        country: new FormControl(),
        zip: new FormControl(),
        phone: new FormControl(),
        email: new FormControl(),
        subscriptionStartDate: new FormControl(),
        subscriptionEndDate: new FormControl(),
        subscriptionPrice: new FormControl(),
        exportImages: new FormControl(),
        userName1: new FormControl(),
        password: new FormControl(),
        securityQuestion: new FormControl(),
        answer: new FormControl()
    });

    LicenseTypes = ['Concurrent License', 'Single License', 'Site License', 'Reseller'];

    AccountTypes = ['High School', 'Community College', 'Career College', 'Higher Education', 'Library', 'Medical School', 'Corporate Training', 'Other'];

    SecurityQuestions = ['What is your pets name', 'Where did you spend your ....', 'What was the last name of your ....', 'What is the name of your ....'];


    constructor(private application: ApplicationService, private router: Router, private fb: FormBuilder) {
        this.createForm();
    }

    createForm() {
        this.addNewLicenseForm = this.fb.group({
            licenseType: ['', Validators.required],
            accountNo: ['', [Validators.required]],
            licenseeFirstName: ['', Validators.required],
            licenseeLastName: ['', Validators.required],
            accountType: ['', Validators.required],
            institutionName: ['', Validators.required],
            address: ['', Validators.required],
            city: ['', Validators.required],
            state: ['', Validators.required],
            country: ['', Validators.required],
            zip: ['', Validators.compose([(Validators.required, Validators.pattern(/^\d{5}$/))])],  // -- Working (5) numbers
            phone: ['', Validators.compose([(Validators.required, Validators.pattern(/^(\()?\d{3}(\))?(-|\s)?\d{3}(-|\s)\d{4}$/))])],
            email: ['', Validators.compose([Validators.required, Validators.pattern(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)])], //:=>/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
            subscriptionStartDate: ['', Validators.required],
            subscriptionEndDate: ['', Validators.required],
            subscriptionPrice: ['', [(Validators.required, Validators.pattern(/^\$?[0-9][0-9,]*[0-9]\.?[0-9]{0,2}$/i))]],
            exportImages: ['', Validators.compose([Validators.required, Validators.pattern('(?:NaN|-?(?:(?:\\d+|\\d*\\.\\d+)(?:[E|e][+|-]?\\d+)?|Infinity))')])],
            userName1: ['', Validators.required],
            password: ['', Validators.required],
            securityQuestion: ['', Validators.required],
            answer: ['', Validators.required]
        });

        this.addNewLicenseForm.valueChanges
            .subscribe(data => this.onValueChanged(data));

        this.onValueChanged(); // (re)set validation messages now
    }

    ngAfterViewInit(): void {
        this.initializeUIElements();

        jQuery(function () {
            jQuery('#datetimepicker1, #datetimepicker2').datetimepicker({
                //language: 'pt-BR'
            });
        });
    }

    initializeUIElements(): void {



    }

    ngOnInit(): void {
        /*if (this.application.currentUser == null) {
            this.router.navigate(['/login']);
        }*/
        this.createForm();
    }

    showAlert(id: string): void {
        jQuery('#' + id).modal('show');
    }

    //ngOnInit(): void {
    //    this.buildForm();
    //}

    //buildForm(): void {
    //    this.heroForm = this.fb.group({
    //        'name': [this.hero.name, [
    //            Validators.required,
    //            Validators.minLength(4),
    //            Validators.maxLength(24),
    //            forbiddenNameValidator(/bob/i)
    //        ]
    //        ],
    //        'alterEgo': [this.hero.alterEgo],
    //        'power': [this.hero.power, Validators.required]
    //    });

    //    this.heroForm.valueChanges
    //        .subscribe(data => this.onValueChanged(data));

    //    this.onValueChanged(); // (re)set validation messages now
    //}


    onValueChanged(data?: any) {
        if (!this.addNewLicenseForm) { return; }
        const form = this.addNewLicenseForm;

        for (const field in this.formErrors) {
            // clear previous error message (if any)
            this.formErrors[field] = '';
            const control = form.get(field);

            if (control && control.dirty && !control.valid) {
                const messages = this.validationMessages[field];
                for (const key in control.errors) {
                    this.formErrors[field] += messages[key] + ' ';
                }
            }
        }
    }

    formErrors = {
        'licenseType': '',
        'accountNo': '',
        'licenseeFirstName': '',
        'licenseeLastName': '',
        'accountType': '',
        'institutionName': '',
        'address': '',
        'city': '',
        'state': '',
        'country': '',
        'zip': '',
        'phone': '',
        'email': '',
        'subscriptionStartDate': '',
        'subscriptionEndDate': '',
        'subscriptionPrice': '',
        'exportImages': '',
        'userName1': '',
        'password': '',
        'securityQuestion': '',
        'answer': ''
    };

    validationMessages = {
        'licenseType': {
            'required': 'License type is required.'
        },
        'accountNo': {
            'required': 'Account Number is required.'
        },
        'licenseeFirstName': {
            'required': 'LicenseeFirstName is required.',
            'forbiddenName': 'Someone named "Bob" cannot be a Licensee'
        },
        'licenseeLastName': {
            'required': 'LicenseeLastName is required.'
        },
        'accountType': {
            'required': 'AccountType is required.'
        },
        'institutionName': {
            'required': 'InstitutionName is required.'
        },
        'address': {
            'required': 'Address is required.'
        },
        'city': {
            'required': 'City is required.'
        },
        'state': {
            'required': 'State is required.'
        },
        'country': {
            'required': 'Country is required.'
        },
        'zip': {
            'required': 'Zip is required.',
            'pattern': 'Only 5 digited numbers (US zip) are allowed.'
        },
        'phone': {
            'required': 'Phone is required.',
            'pattern': 'Not a valid US pattern.'
        },
        'email': {
            'required': 'Email is required.',
            'pattern': 'Email pattern is not valid.'
        },
        'subscriptionStartDate': {
            'required': 'SubscriptionStartDate is required.'
        },
        'subscriptionEndDate': {
            'required': 'SubscriptionEndDate is required.'
        },
        'subscriptionPrice': {
            'required': 'SubscriptionPrice is required.',
            'pattern': 'Currency not valid.'
        },
        'exportImages': {
            'required': 'ExportImages is required.',
            'pattern': 'Only numbers are allowed.'
        },
        'userName1': {
            'required': 'UserName is required.'
        },
        'password': {
            'required': 'Password is required.'
        },
        'securityQuestion': {
            'required': 'SecurityQuestion is required.'
        },
        'answer': {
            'required': 'Answer is required.'
        }
    };

}