Angular 2表单验证开始日期< =结束日期 [英] Angular 2 form validations start date <= end date

问题描述

我正在尝试添加验证，以使结束日期不能早于开始日期.不幸的是，我不知道该怎么做，到目前为止，我在互联网上没有找到任何有用的建议.我的表单如下:

I'm trying to add validations such that the end date can't be before the start date. Unfortunately I have no idea how to do that, and I didn't find any helpful advice in the internet so far. My form looks like this:

editAndUpdateForm(tageler: Tageler) {
    this.tageler = tageler;
    this.tagelerForm = this.fb.group({
      title: [this.tageler.title, Validators.required],
      text: this.tageler.text,
      group: [[this.tageler.group], Validators.required],
      date_start: new Date(this.tageler.start).toISOString().slice(0, 10),
      date_end: new Date(this.tageler.end).toISOString().slice(0, 10),
      ...
    });
    this.tagelerForm.valueChanges
       .subscribe(data => this.onValueChanged(data));
    }

我到目前为止的验证:

onValueChanged(data?: any) {
    if (!this.tagelerForm) {
      return;
    }
    const form = this.tagelerForm;

    for (const field in this.formErrors) {

    // clear previous error message (if any)
      this.formErrors[field] = '';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
}

validationMessages = {
    'title': {
      'required': 'Geben Sie bitte einen Namen ein.',
    },
    'group': {
      'required': 'Wählen Sie bitte eine Gruppe aus.'
    },
    'bringAlong': {
      'required': 'Bitte Feld ausfüllen.'
    },
    'uniform': {
      'required': 'Bitte Feld ausfüllen.'
    },
};

formErrors = {
    'title': 'Geben Sie bitte einen Namen ein.',
    'group': 'Wählen Sie bitte eine Gruppe aus.',
    'bringAlong': 'Bitte Feld ausfüllen',
    'uniform': 'Bitte Feld ausfüllen',
};

表单控件"date_start"和"date_end"包含日期格式为"dd.MM.yyyy"的日期字符串，并且我希望"date_end"大于或等于"date_start".

The the form-controls 'date_start' & 'date_end' contain a date-string of the form 'dd.MM.yyyy', and I want 'date_end' to be bigger or equal 'date_start'.

我想直接显示错误消息(我的html代码看起来像这样:)

I'd like to directly display the error message (my html code looks like this:)

<label for="formControlName_date_end" class="col-3 col-form-label">Ende:</label>
      <div class="col-5">
        <input id="formControlName_date_end" class="form-control" formControlName="date_end" type="date" value="{{tageler.end | date: 'yyyy-MM-dd'}}">
      </div>
      <div *ngIf="formErrors.date_end" class="alert alert-danger">
        {{ formErrors.date_end }}
      </div>

有人可以帮我吗?

谢谢！

推荐答案

我们无法在验证中执行此操作，因为我们需要两个控制值，即开始日期和结束日期进行比较.因此最好在组件中比较两个日期

we cant do it in validation because we need two control values that is startdate and enddate for comparison. So it is better to compare two dates in your component

error:any={isError:false,errorMessage:''};

compareTwoDates(){
   if(new Date(this.form.controls['date_end'].value)<new Date(this.form.controls['date_start'].value)){
      this.error={isError:true,errorMessage:'End Date can't before start date'};
   }
}

在您的html中

<label for="formControlName_date_end" class="col-3 col-form-label">Ende:</label>
<div class="col-5">
      <input id="formControlName_date_end" class="form-control" formControlName="date_end" type="date" value="{{tageler.end | date: 'yyyy-MM-dd'}}" (blur)="compareTwoDates()">
</div>
<div *ngIf="error.isError" class="alert alert-danger">
   {{ error.errorMessage }}
</div>

这篇关于Angular 2表单验证开始日期< =结束日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！