如何在angular 7和HTML中显示基于两个日期范围的两个不同错误消息

Question

我必须根据购买日期和生效日期验证搬家日期。条件是它应该在购买日期和生效日期之间。所以在我的ts文件中，我写了这样的代码：

moveInDateRange = [
DateStringService.toDate(purchaseDate), 
DateStringService.toDate(policyEffectiveDate)
];

但在HTML中，我必须在两个不同的场景中显示两条不同的错误消息。

1. 入住日期必须在您的购买日期当天或之后
2. 入住日期必须在您的保单生效日期当天或之前

所以我写了这样的代码：

<div *ngIf="moveindate < finalDetails.property.Details.moveInDateRange[0].toLocaleDateString()">
<span class="txt txt--error">move-in date must be on or after your purchase date</span>
</div>
<div *ngIf="moveindate > finalDetails.property.Details.moveInDateRange[1].toLocaleDateString()">
<span class="txt txt--error">move-in date must be on or before your policy effective date</span>
</div>

但问题是它总是显示第二条错误消息。

你能告诉我哪里出了问题吗？

Answer 1

可能您的条件无效，因为您是通过字符串进行比较的。你试过使用Dates.compare((吗？

你应该在这里找到你想要的：

• https://www.w3resource.com/javascript-exercises/javascript-date-exercise-5.php
• https://masteringjs.io/tutorials/fundamentals/compare-dates

Answer 2

如果您使用reactiveForm，您可以创建一个自定义验证器。您可以通过FormControl"；moveinDate"；，但您需要记住updateAndvalidity控件何时更改"；purchaseDate"；以及"；policyEffectiveDate"；

我们来了！

我想你有一些类似的

form = new FormGroup({
purchaseDate: new FormControl(),
policyEffectiveDate: new FormControl(),
moveinDate: new FormControl(null, this.validationBetween())
});

创建表单后，我们需要在更改purchaseDate和policyEffectiveDate时考虑，我们将使用rxj运算符"合并"；当一个或另一个FormControl更改其值时发出新值。但是，由于merge在两个FormControls更改后只发出一个值，我们将同时使用startWith和

ngOnInit(){
merge(this.form.get('purchaseDate').valueChanges.pipe(
startWith(this.form.value.purchaseDate)),
this.form.get('policyEffectiveDate').valueChanges.pipe(
startWith(this.form.value.policyEffectiveDate))
).subscribe(_=>{
this.form.get('moveinDate').updateValueAndValidity()
})
}

我们的自定义验证器可以返回具有相同属性的对象：；错误"；在这两种情况下，或者如果我们想产生差异，可以使用不同的属性。

validationBetween(){
return (control:AbstractControl)=>{
const parent=control.parent as FormGroup
if (parent)
{
const purchaseDate=parent.get('purchaseDate')
const policyEffectiveDate=parent.get('policyEffectiveDate')
if (!purchaseDate.value || !policyEffectiveDate.value || !control.value)
return null;
if (purchaseDate.value>control.value)
return {error:"moveInDate should be greater or equal than "+purchaseDate.value}
if (policyEffectiveDate.value<control.value)
return {error:"policyEffectiveDate should be less or equal than "+policyEffectiveDate.value}
}
return null;
}
}

如果我们选择相同的属性，我们可以简单地使用

<form [formGroup]="form">
<input type="date" formControlName="purchaseDate">
<input type="date" formControlName="policyEffectiveDate">
<input type="date" formControlName="moveinDate">
{{form.get('moveinDate').errors?.error}}
</form>

如果我们在一种情况下选择返回，例如{errorLess:"...."}和{errorGreater:"..."}，我们可以使用类似的返回

<div *ngIf="form.get('moveinDate').errors?.errorLess">Error less</div>
<div *ngIf="form.get('moveinDate').errors?.errorGreater">Error Greater</div>

堆叠式

注意：我使用输入类型＝"；日期"；，真的，我更喜欢使用角度素材日期选择器或ng引导程序日期选择器。在这种情况下，我们需要将"；日期"；以字符串的方式"；yyyy-mm-dd"；或者使用getTimer((获取比较它们之前的毫秒数