<commit_before>import {OnInit, Input, Output, EventEmitter, Component} from '@angular/core';
import {Validators, REACTIVE_FORM_DIRECTIVES, FormBuilder, FormGroup, FormControl, FORM_DIRECTIVES } from '@angular/forms';
import {Utils} from '../../../../commons/ram-utils';
import {RAMNgValidators} from '../../commons/ram-ng-validators';
import {Calendar} from 'primeng/primeng';

@Component({
    selector: 'access-period',
    templateUrl: 'access-period.component.html',
    directives: [REACTIVE_FORM_DIRECTIVES,FORM_DIRECTIVES,Calendar]
})
export class AccessPeriodComponent implements OnInit {

    public form: FormGroup;
    public dateFormat: string = 'dd/mm/yy';

    @Input('data') public data: AccessPeriodComponentData;

    @Output('dataChange') public dataChanges = new EventEmitter<AccessPeriodComponentData>();

    @Output('isValid') public isValid = new EventEmitter<boolean>();

    constructor(private _fb: FormBuilder) {
    }

    public ngOnInit() {
        const startDate = this.data.startDate;
        const endDate = this.data.endDate;
        const formattedStartDate: string = this.formatDate(startDate);
        const formattedEndDate: string = this.formatDate(endDate);

        this.form = this._fb.group(
            {
                'startDate': [formattedStartDate, Validators.compose([Validators.required, RAMNgValidators.dateFormatValidator])],
                'endDate': [formattedEndDate, Validators.compose([RAMNgValidators.dateFormatValidator])],
                'noEndDate': [this.data.noEndDate]
            },
            {
                validator: Validators.compose([this._isDateBefore('startDate', 'endDate')])
            }
        );

        let endDate = this.form.controls['endDate'] as FormControl;
        let noEndDate = this.form.controls['noEndDate'];

        noEndDate.valueChanges.subscribe((v: Boolean) => {
            if (v === true) {
                // reset endDate if noEndDate checkbox is selected
                endDate.updateValue(null);
            }
        });
        this.form.valueChanges.subscribe((v: AccessPeriodComponentData) => {
            this.dataChanges.emit(v);
            this.isValid.emit(this.form.valid);
        });
    }

    private formatDate(d: Date) {
        return d === null || d === undefined ? null : ('0' + d.getDate()).slice(-2) + '/' + ('0'+(d.getMonth()+1)).slice(-2) + '/' + d.getFullYear();
    }

    private _isDateBefore = (startDateCtrlName: string, endDateCtrlName: string) => {
        return (cg: FormGroup) => {
            let startDate = Utils.parseDate((cg.controls[startDateCtrlName] as FormControl).value);
            let endDate = Utils.parseDate((cg.controls[endDateCtrlName] as FormControl).value);

            return (startDate !== null && endDate !== null && startDate.getTime() > endDate.getTime()) ? {
                isEndDateBeforeStartDate: {
                    valid: false
                }
            } : null;
        };
    }
}

export interface AccessPeriodComponentData {
    startDate: Date;
    endDate?: Date;
    noEndDate: boolean;
}
<commit_msg>Force it to validate on load so it can tell that a start date defaulted to today is valid (cherry picked from commit 8085ffc)<commit_after>import {OnInit, Input, Output, EventEmitter, Component} from '@angular/core';
import {Validators, REACTIVE_FORM_DIRECTIVES, FormBuilder, FormGroup, FormControl, FORM_DIRECTIVES } from '@angular/forms';
import {Utils} from '../../../../commons/ram-utils';
import {RAMNgValidators} from '../../commons/ram-ng-validators';
import {Calendar} from 'primeng/primeng';

@Component({
    selector: 'access-period',
    templateUrl: 'access-period.component.html',
    directives: [REACTIVE_FORM_DIRECTIVES,FORM_DIRECTIVES,Calendar]
})
export class AccessPeriodComponent implements OnInit {

    public form: FormGroup;
    public dateFormat: string = 'dd/mm/yy';

    @Input('data') public data: AccessPeriodComponentData;

    @Output('dataChange') public dataChanges = new EventEmitter<AccessPeriodComponentData>();

    @Output('isValid') public isValid = new EventEmitter<boolean>();

    constructor(private _fb: FormBuilder) {
    }

    public ngOnInit() {
        const startDate = this.data.startDate;
        const endDate = this.data.endDate;
        const formattedStartDate: string = this.formatDate(startDate);
        const formattedEndDate: string = this.formatDate(endDate);

        this.form = this._fb.group(
            {
                'startDate': [formattedStartDate, Validators.compose([Validators.required, RAMNgValidators.dateFormatValidator])],
                'endDate': [formattedEndDate, Validators.compose([RAMNgValidators.dateFormatValidator])],
                'noEndDate': [this.data.noEndDate]
            },
            {
                validator: Validators.compose([this._isDateBefore('startDate', 'endDate')])
            }
        );

        let noEndDate = this.form.controls['noEndDate'];

        noEndDate.valueChanges.subscribe((v: Boolean) => {
            if (v === true) {
                // reset endDate if noEndDate checkbox is selected
                ( this.form.controls['endDate'] as FormControl).updateValue(null);
            }
        });
        this.form.valueChanges.subscribe((v: AccessPeriodComponentData) => {
            this.dataChanges.emit(v);
            this.isValid.emit(this.form.valid);
        });

        this.isValid.emit(this.form.valid);
    }

    private formatDate(d: Date) {
        return d === null || d === undefined ? null : ('0' + d.getDate()).slice(-2) + '/' + ('0'+(d.getMonth()+1)).slice(-2) + '/' + d.getFullYear();
    }

    private _isDateBefore = (startDateCtrlName: string, endDateCtrlName: string) => {
        return (cg: FormGroup) => {
            let startDate = Utils.parseDate((cg.controls[startDateCtrlName] as FormControl).value);
            let endDate = Utils.parseDate((cg.controls[endDateCtrlName] as FormControl).value);

            return (startDate !== null && endDate !== null && startDate.getTime() > endDate.getTime()) ? {
                isEndDateBeforeStartDate: {
                    valid: false
                }
            } : null;
        };
    }
}

export interface AccessPeriodComponentData {
    startDate: Date;
    endDate?: Date;
    noEndDate: boolean;
}

{'fraction_non_alphanumeric': 0.1330485682645151, 'fraction_numerical': 0.0022148394241417496, 'mean_word_length': 2.756387403446227, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4334260', 'n_tokens_mistral': 1817, 'n_tokens_neox': 1780, 'n_words': 365}