import { Component , OnInit } from '@angular/core' ; import { FormGroup , FormBuilder , Validators } from '@angular/forms' ; import { IMyDrpOptions } from '../../src/my-date-range-picker/interfaces' ; declare var require ; const amSampleTpl = require ( './sample-date-range-picker-access-modifier.html' ) ; @ Component ( { selector : 'sample-date-range-picker-access-modifier' , template : amSampleTpl } ) export class SampleDateRangePickerAccessModifier implements OnInit { private myDateRangePickerOptions : IMyDrpOptions = { dateFormat : 'dd.mm.yyyy' , height : '34px' , width : '250px' } ; private myForm : FormGroup ; private model : string = null ; constructor ( private formBuilder ) { } ngOnInit ( ) { console . log ( 'onInit(): SampleDateRangePickerReactiveForms' ) ; this . myForm = this . formBuilder . group ( { myDateRange : [ { beginDate : { year : 2018 , month : 10 , day : 9 } , endDate : { year : 2018 , month : 10 , day : 19 } } , Validators . required ] } ) ; } onSubmitNgModel ( ) { console . log ( 'Value: ' , this . model ) ; } onSubmitReactiveForms ( ) { console . log ( 'Value: ' , this . myForm . controls [ 'myDateRange' ] . value , ' - Valid: ' , this . myForm . controls [ 'myDateRange' ] . valid , ' - Dirty: ' , this . myForm . controls [ 'myDateRange' ] . dirty , ' - Touched: ' , this . myForm . controls [ 'myDateRange' ] . touched ) ; } setDateRange ( ) { let date = new Date ( ) ; let year = date . getFullYear ( ) ; let month = date . getMonth ( ) + 1 ; let day = date . getDate ( ) ; this . myForm . setValue ( { myDateRange : { beginDate : { year : year , month : month , day : day } , endDate : { year : year , month : month , day : day } } } ) ; } resetDateRange ( ) { let date = new Date ( ) ; let year = date . getFullYear ( ) ; let month = date . getMonth ( ) + 1 ; let day = date . getDate ( ) ; this . myForm . reset ( { myDateRange : { beginDate : { year : year , month : month , day : day } , endDate : { year : year , month : month , day : day } } } ) ; } clearDateRange ( ) { this . myForm . setValue ( { myDateRange : null } ) ; } }