validation process is functioning correctly;
give this a shot:
import { Component, VERSION } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
public startDate: any;
public endDate: any;
public daysDifference: any;
formGroup: FormGroup = new FormGroup({
start: new FormControl('', Validators.required),
end: new FormControl('', Validators.required),
term: new FormControl(''),
});
startEvent(event: any) {
let date = event.target.value;
this.startDate = new Date(date);
this.verify();
}
endEvent(event: any) {
let date = event.target.value;
this.endDate = new Date(date);
this.verify();
}
verify() {
if (this.startDate && this.endDate) {
var time =
this.endDate.getTime() - this.startDate.getTime();
var days = time / (1000 * 3600 * 24); //Difference in Days
if (days && days >= 0) {
this.daysDifference = days;
} else {
this.daysDifference = null;
}
}
}
saveData(value: any): void {
console.log(value);
}
cancelAction(): void {
console.log('cancel');
}
}
consider managing validation through reactiveForm itself (abstractControl)
explore the use of observables as well, they have simple operators that can streamline code