使用Angular 7或更高版本验证多个开始日期和日期字段

Question

我有多个开始日期和结束日期输入字段。我找不到验证它们的方法。我试图验证它们，但无法获得相关的输出。

这是stackblitz网址：https://stackblitz.com/edit/angular-yhbuqn-wpbwjw

我有几个目标：

1( 需要设置我在ts文件中提到的默认日期。那里是我尝试设置默认值的注释代码。

2( 如果结束日期大于开始日期，则不会显示错误消息。您可以看到正在应用红色边框，但不显示消息。

3( 我无法设置第二组开始和结束日期输入字段的值。

Answer 1

对于第一部分，要设置日期，请尝试以下操作：

ngOnInit() {
this.myForm = this.formBuilder.group({
users: this.formBuilder.array([
this.formBuilder.group(
{
startDate: [this.startDate],
endDate: [this.endDate]
},
{ validator: this.checkDates }
)
])
});
}

对于第二部分，请尝试以下操作：通过这种方式，您必须手动触摸输入，或者您可以尝试使用this.myForm.markAllAsTouched();

<mat-error              *ngIf="myForm.controls['users'].controls[$index].controls['endDate'].touched && myForm.controls['users'].controls[$index].invalid">
End date cannot be earlier than start date
</mat-error>

或

<mat-error *ngIf="myForm.controls['users'].controls[$index].controls['endDate'].value != null && myForm.controls['users'].controls[$index].invalid ">
End date cannot be earlier than start date
</mat-error>