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

问题描述

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

editAndUpdateForm(tagler: Tageler) {this.tagler = tageler;this.taglerForm = this.fb.group({标题: [this.tagler.title, Validators.required],文本:this.tagler.text，组:[[this.tagler.group], Validators.required],date_start: 新日期(this.tagler.start).toISOString().slice(0, 10),date_end: 新日期(this.tagler.end).toISOString().slice(0, 10),...});this.taglerForm.valueChanges.subscribe(data => this.onValueChanged(data));}

到目前为止我的验证:

onValueChanged(data?: any) {如果(！this.taglerForm){返回;}const form = this.taglerForm;for(this.formErrors 中的常量字段){//清除之前的错误信息(如果有的话)this.formErrors[field] = '';const control = form.get(field);如果(控制&& control.dirty && !control.valid){const 消息 = this.validationMessages[field];for (const key in control.errors) {this.formErrors[field] += messages[key] + ' ';}}}}验证消息 = {'标题': {'required': 'Geben Sie bitte einen Namen ein.',},'团体': {'required': 'Wählen Sie bitte eine Gruppe aus.'},'随身携带':{'required': 'Bitte Feld ausfüllen.},'制服': {'required': 'Bitte Feld ausfüllen.},};表单错误 = {'title': 'Geben Sie bitte einen Namen ein.','group': 'Wählen Sie bitte eine Gruppe aus.','bringAlong': 'Bitte Feld ausfüllen','制服': 'Bitte Feld ausfüllen',};

表单控件'date_start' &date_end"包含dd.MM.yyyy"形式的日期字符串，我希望date_end"大于或等于date_start".

我想直接显示错误信息(我的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="{{tagler.end | date: 'yyyy-MM-dd'}}">

<div *ngIf="formErrors.date_end" class="alert alert-danger">{{ formErrors.date_end }}

有人可以帮我吗?

谢谢！

解决方案

我们不能在验证中这样做，因为我们需要两个控制值 startdate 和 enddate 进行比较.所以最好在你的组件中比较两个日期

error:any={isError:false,errorMessage:''};比较两个日期(){if(new Date(this.form.controls['date_end'].value)<new Date(this.form.controls['date_start'].value)){this.error={isError:true,errorMessage:'结束日期不能早于开始日期'};}}

在你的 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="{{tagler.end | date: 'yyyy-MM-dd'}}" (blur)=比较两个日期()">

<div *ngIf="error.isError" class="alert alert-danger">{{ error.errorMessage }}

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));
    }

My validations so far:

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',
};

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'.

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>

Could someone help me?

Thanks!

解决方案

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'};
   }
}

In your 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屋！