Material 日期选择器验证不适用于 FormBuilder.patchValue()

Question

我有一个要求用户输入日期的表单，在他们输入之前提交按钮是灰色的。在我必须编辑表单之前，这非常有效。出于某种原因，当我使用 FormBuilder 的 patchValue() 方法时，验证没有获取填充日期字段的时间戳：

在我的页面构造函数中，我构建了我的表单（为简洁起见删除了其他字段）：

this.submitForm = this.formBuilder.group({
  submissionReleaseDate: ['', Validators.required]
});

然后在我的 ngOnInit() 中查询从我的数据库中获取 releaseDate 然后运行:

    this.submitForm.patchValue({
      submissionReleaseDate: moment.unix(this.submission.submissionReleaseDate).utc(),
    })

除了日期字段（其中 class保持 ng-invalid)，直到我在该字段中键入一个字符。

这是我加载编辑页面时的样子，您可以看到即使字段已填充，提交按钮也是灰色的：

这是我的 material 日期选择器 html:

<input matInput [min]="date" formControlName="submissionReleaseDate" [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

还有那个页面的 module.ts：

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    NgAisModule,
    MatDatepickerModule,
    MatMomentDateModule,
    MatNativeDateModule,
    RouterModule.forChild(routes),
  ],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
  ],
  declarations: [SubmitPage]
})

Answer 1

很明显，响应式表单不能很好地与 ChangeDetectionPush 配合使用，您使用的是 ChangeDetectionPush 吗？如果是：

我知道这不是最优的，但我发现 ChangeDetectorRef 可以解决这个问题，强制 UI 刷新（它不知道你的模式自 ChangeDetectionPush 开启)

构造函数：

constructor(
  private cdr: ChangeDetectorRef
)

更新数据：

 this.submitForm.patchValue({
      submissionReleaseDate: moment.unix(this.submission.submissionReleaseDate).utc(),
    }) 

 this.cdr.detectChanges(); // This is magic

Answer 2

好吧...我花了大约一年的时间，但我终于弄明白了。事实证明，在页面加载时，我收到了 matDatepickerMin 验证器错误。这是因为我使用的 [min]="date" 变量被定义为：

this.date = moment().utc().startOf('day').format();

虽然需要这样：

this.date = moment().utc().startOf('day').format("X");

由于最小日期格式与我用于 patchValue 的日期格式不同，因此导致了错误。呸！

Material 日期选择器验证不适用于 FormBuilder.patchValue()

Material Date Picker Validation not working with FormBuilder.patchValue()

validation

angular-material

angular

angular-reactive-forms