import { Component , OnInit } from '@angular/core' ; import { FormGroup , FormBuilder , Validators } from '@angular/forms' ; import { INgxMyDpOptions } from '../../src/ngx-my-date-picker/interfaces' ; declare var require ; const amSampleTpl = require ( './sample-date-picker-reactive-forms.html' ) ; @ Component ( { selector : 'sample-date-picker-reactive-forms' , template : amSampleTpl } ) export class SampleDatePickerReacticeForms implements OnInit { private myDatePickerOptions : INgxMyDpOptions = { dateFormat : 'dd.mm.yyyy' } ; private disabled : boolean = false ; private myForm : FormGroup ; constructor ( private formBuilder ) { } ngOnInit ( ) { console . log ( 'onInit(): SampleDatePickerReacticeForms' ) ; let d = new Date ( ) ; this . myForm = this . formBuilder . group ( { myDate : [ { date : { year : d . getFullYear ( ) , month : d . getMonth ( ) + 1 , day : d . getDate ( ) } } , Validators . required ] } ) ; } onSubmitReactiveForms ( ) { console . log ( 'Value: ' , this . myForm . controls [ 'myDate' ] . value , ' - Valid: ' , this . myForm . controls [ 'myDate' ] . valid , ' - Dirty: ' , this . myForm . controls [ 'myDate' ] . dirty ) ; } setDate ( ) { let date = new Date ( ) ; this . myForm . setValue ( { myDate : { date : { year : date . getFullYear ( ) , month : date . getMonth ( ) + 1 , day : date . getDate ( ) } } } ) ; } resetDate ( ) { let date = new Date ( ) ; this . myForm . reset ( { myDate : { date : { year : date . getFullYear ( ) , month : date . getMonth ( ) + 1 , day : date . getDate ( ) } } } ) ; } clearDate ( ) { this . myForm . setValue ( { myDate : null } ) ; } disable ( ) { this . disabled = ! this . disabled ; if ( this . disabled ) { this . myForm . get ( 'myDate' ) . disable ( ) ; } else { this . myForm . get ( 'myDate' ) . enable ( ) ; } } }