import { Component } from "@angular/core" ; import { Sliderpanel } from "../../sliderpanel/Sliderpanel" ; import { CommBroker } from "../../../services/CommBroker" ; import { Consts } from "../../../../src/Conts" ; import { NotesBase } from "./NotesBase" ; import { MailModel } from "../../../models/MailModel" ; import { FormGroup , FormControl , FormBuilder , Validators } from "@angular/forms" ; import StartCapValidator from "../../../validators/StartCapValidator" ; import NameTakenValidator from "../../../validators/NameTakenValidator" ; import { ToastrService } from "ngx-toastr" ; @ Component ( { selector : 'Notes1' , templateUrl : './Notes1.html' , styleUrls : [ './Notes1.css' ] } ) export class Notes1 extends NotesBase { private notesForm : FormGroup ; private notesTextArea : FormControl ; private userName : FormControl ; private reference : FormControl ; private phone : FormControl ; private birthdate : FormControl ; private counter : FormControl ; private login : FormControl ; private model : MailModel ; private mapModel : Map < any , any > ; constructor ( fb , protected sliderPanel , protected commBroker , public toastrService ) { super ( sliderPanel , commBroker ) ; this . slideLeft = 'notes2' ; this . notesForm = fb . group ( { 'userName' : [ '' , Validators . required ] , 'reference' : [ '' , Validators . required ] , 'phone' : [ '(xxx)-xxxx-xxx' , Validators . minLength ( 10 ) ] , 'birthdate' : [ '' , [ Validators . required , this . isOldEnough ] ] , 'counter' : [ '' ] , 'notesTextArea' : [ 'enter text here' , [ Validators . required , StartCapValidator ] ] , 'login' : [ '' , [ Validators . required , StartCapValidator ] , NameTakenValidator ] } ) ; this . notesTextArea = this . notesForm . controls [ 'notesTextArea' ] as FormControl ; this . userName = this . notesForm . controls [ 'userName' ] as FormControl ; this . reference = this . notesForm . controls [ 'reference' ] as FormControl ; this . login = this . notesForm . controls [ 'login' ] as FormControl ; this . phone = this . notesForm . controls [ 'phone' ] as FormControl ; this . birthdate = this . notesForm . controls [ 'birthdate' ] as FormControl ; this . counter = this . notesForm . controls [ 'counter' ] as FormControl ; this . model = new MailModel ( 0 , '' , true , '' , '' ) ; this . mapModel = new Map ( ) ; this . mapModel . set ( 'my name' , 'Sean Levy' ) ; this . observeNameChange ( ) ; this . observeFormChange ( ) ; this . commBroker . getService ( Consts . Services ( ) . Properties ) . setPropView ( 'notes1' ) ; } isOldEnough ( control ) { if ( ! control . value ) { return null ; } let birthDatePlus18 = new Date ( control . value ) ; let year = birthDatePlus18 . getFullYear ( ) ; if ( year < 1925 ) return { notValid : true } ; birthDatePlus18 . setFullYear ( birthDatePlus18 . getFullYear ( ) + 18 ) ; return birthDatePlus18 < new Date ( ) ? null : { tooYoung : true } ; } /**
     * Listen to observable emitted events from name control
     * use one of the many RX operators debounceTime to control
     * the number of events emitted per milliseconds
     **/ observeNameChange ( ) { this . userName . valueChanges . debounceTime ( 100 ) . subscribe ( ( value ) => { console . log ( 'name changed, notified via observable: ' , value ) ; } ) ; } observeFormChange ( ) { this . notesForm . valueChanges . debounceTime ( 100 ) . subscribe ( ( value ) => { console . log ( 'forum changed, notified via observable: ' , value ) ; } ) ; } onReset ( event ) { event . stopImmediatePropagation ( ) ; event . preventDefault ( ) ; try { this . notesForm . reset ( ) ; } catch ( e ) { } return false ; } onSubmit ( event ) { this . toastrService . success ( `sent ${ event . notesTextArea }` ) ; } onChange ( event ) { if ( event . target . value . length < 3 ) console . log ( 'text too short for subject' ) ; } }