Eckige 2-form Validierungen start-Datum <= Ende-Datum

Basiert auf der Antwort von santiagomaldonado habe ich eine generische ValidatorFn, die verwendet werden können in mehrere Reaktive Formen mit einem dynamischen Wert zurück.

export class DateValidators {
    static dateLessThan(dateField1: string, dateField2: string, validatorField: { [key: string]: boolean }): ValidatorFn {
        return (c: AbstractControl): { [key: string]: boolean } | null => {
            const date1 = c.get(dateField1).value;
            const date2 = c.get(dateField2).value;
            if ((date1 !== null && date2 !== null) && date1 > date2) {
                return validatorField;
            }
            return null;
        };
    }
}

Importieren Sie die Prüfung und es verwenden, wie Sie dies in Ihrem formgroup Prüfungen.

    this.form = this.fb.group({
        loadDate: null,
        deliveryDate: null,
    }, { validator: Validators.compose([
        DateValidators.dateLessThan('loadDate', 'deliveryDate', { 'loaddate': true }),
        DateValidators.dateLessThan('cargoLoadDate', 'cargoDeliveryDate', { 'cargoloaddate': true })
    ])});

Nun können Sie die Validierung in HTML.

<md-error *ngIf="form.hasError('loaddate')">Load date must be before delivery date</md-error>

InformationsquelleAutor Sander Oosterwijk

erstellen Sie eine Gruppe bilden . Lassen Sie die Steuerelemente ein Teil der Gruppe bilden .

       new FormGroup({   
        startDate: this.fb.group({
            dateInput: [{value: ""}, startDateValidator()]
        }),   
        endDate: this.fb.group({
            dateInput: ["", endDateValidator()]
        })  
    }, startDateCannotBeLessThanEndDateValidator());   

        startDateCannotBeLessThanEndDateValidator(formGroup: FormGroup) {

             let startDate = formGroup.get("startDate");   
            let endDate = formGroup.get("endDate");
            //compare 2 dates 
        }

InformationsquelleAutor Darshi Angolkar

Mir ist angular7 + ngprime(für Kalender)

(*wenn Sie nicht möchten, ngprime ersetzen Sie einfach den Kalender-Teil zum anderen.)

Siehe unten code für Datums-Validierung.

Mein code hat eine zusätzliche überprüfung, dass
beginnen Sie einmal das Datum ausgewählt ist, ich block den vergangenen Tagen in end-Daten-Kalender
so, dass das Ende-Datum wird immer später.

wenn Sie nicht wollen, zu blockieren, Datum, löschen [minDate] Teil.
es ist auch arbeiten.

> Komponente

export class test implements OnInit {

  constructor() { }

  defaultDate: Date = new Date();
  checkDate = true;
  form: FormGroup;

  today: Date = new Date(); //StartDate for startDatetime
  startDate: Date = new Date();  //StartDate for endDatetime

  initFormControls(): void {
    this.today.setDate(this.today.getDate());
    this.startDate.setDate(this.today.getDate()); //or start date + 1 day

    this.form = new FormGroup({
      startDatetime: new FormControl('', [Validators.required]),
      endDatetime: new FormControl('', [Validators.required])
    },
      { validators: this.checkDateValidation });
  }

  checkDateValidation: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
    try {

      let startingDatefield = control.get('startDatetime').value;

      this.startDate = new Date(startingDatefield); //new Date(startingDatefield).getDate()
      let endingDatefield = control.get('endDatetime').value;

      if (this.today >= startingDatefield) { //compare to current date 
        console.log("Please set a Start Date that is on or after Current Date and Time.");
        return { 'effectiveStartDatetime': false };

      } else
        if (startingDatefield > endingDatefield && endingDatefield) {
          console.log("Please set an End Date and Time that is after the Start Date and Time.");
          return {};

        } else {
          return {};
        }
    } catch (err) {
    }
  };



  onSubmit() {

    //if form is not valid
    if (!this.form.valid) {
      console.log(" Please fill in all the mandatory fields");

      //do sth
    return;
    }


    //if form is valid
    //do sth

  }


  ngOnInit() {
    this.initFormControls();
  }

> HTML

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <div>
      <p-button type="submit" label="submit"></p-button>
    </div>
  </div>
  <div>
    <p>Start Date/Time"</p>
    <div>
      <p-calendar formControlName="startDatetime" appendTo="body" showTime="true" hourFormat="24" stepMinute="30"
        showSeconds="false" dateFormat="yy-mm-dd" [minDate]="today"></p-calendar>
      <div
        *ngIf="form.get('startDatetime').invalid && (form.get('startDatetime').dirty || form.get('startDatetime').touched)">
        <div *ngIf="form.get('startDatetime').hasError('required')">
        </div>
      </div>
    </div>

    <p>End Date/Time</p>
    <div>
      <p-calendar formControlName="endDatetime" appendTo="body" showTime="true" hourFormat="24" stepMinute="30"
        showSeconds="false" dateFormat="yy-mm-dd" [minDate]="startDate"></p-calendar>
      <div *ngIf="form.get('endDatetime').invalid && (form.get('endDatetime').dirty || form.get('endDatetime').touched)">
        <div *ngIf="!checkDate || form.get('endDatetime').hasError('required')">
        </div>
      </div>
    </div>
  </div>

</form>

InformationsquelleAutor Energy