import { Component , OnInit } from '@angular/core' ; import { FormGroup , FormBuilder , Validators } from '@angular/forms' ; import { IMyOptions , IMyInputFieldChanged } from '../../src/my-date-picker/interfaces' ; declare var require ; const amSampleTpl = require ( './sample-date-picker-access-modifier.html' ) ; @ Component ( { selector : 'sample-date-picker-access-modifier' , template : amSampleTpl } ) export class SampleDatePickerAccessModifier implements OnInit { private myDatePickerOptions : IMyOptions = { dateFormat : 'd.m.yyyy' , height : '34px' , width : '210px' , inline : false } ; private myForm : FormGroup ; private model : string = null ; private selector : number = 0 ; constructor ( private formBuilder ) { } ngOnInit ( ) { console . log ( 'onInit(): SampleDatePickerReactiveForms' ) ; this . myForm = this . formBuilder . group ( { myDate : [ { date : { year : 2018 , month : 10 , day : 9 } } , Validators . required ] } ) ; } onSubmitNgModel ( ) { console . log ( 'Value: ' , this . model ) ; } clearNgModelDate ( ) { this . model = null ; } toggleSelector ( event ) { event . stopPropagation ( ) ; this . selector ++ ; } onSubmitReactiveForms ( ) { console . log ( 'Value: ' , this . myForm . controls [ 'myDate' ] . value , ' - Valid: ' , this . myForm . controls [ 'myDate' ] . valid , ' - Invalid: ' , this . myForm . controls [ 'myDate' ] . invalid , ' - Dirty: ' , this . myForm . controls [ 'myDate' ] . dirty , ' - Pristine: ' , this . myForm . controls [ 'myDate' ] . pristine , ' - Touched: ' , this . myForm . controls [ 'myDate' ] . touched ) ; } setDate ( ) { let date = new Date ( ) ; this . myForm . patchValue ( { myDate : { date : { year : date . getFullYear ( ) , month : date . getMonth ( ) + 1 , day : date . getDate ( ) } } } ) ; } resetDate ( ) { this . myForm . reset ( { myDate : { jsdate : new Date ( ) } } ) ; } clearDate ( ) { this . myForm . patchValue ( { myDate : null } ) ; } onInputFieldChanged ( event ) { console . log ( 'onInputFieldChanged(): Value: ' , event . value , ' - dateFormat: ' , event . dateFormat , ' - valid: ' , event . valid ) ; } }