Question

我有一个表单，要求用户输入日期，“提交”按钮显示为灰色，直到他们输入为止。直到我必须编辑表单，这才可以正常工作。出于某种原因，当我使用FormBuilder的{{1}}方法时，验证并不会占用填充日期字段的时间戳，就像这样：

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

patchValue()

然后在我的this.submitForm = this.formBuilder.group({ submissionReleaseDate: ['', Validators.required] });中查询以从数据库中获取releaseDate，然后运行：

ngOnInit()

我的表单中的所有其他字段都经过验证（在检查由angular添加的类时，我看到ng-valid），除了date字段（该类仍为ng-valid）之外，直到我在该字段中键入字符为止。 / p>

这是我加载编辑页面时的外观，即使填充了字段，您也会看到“提交”按钮显示为灰色：

这是我的重要日期选择器html：

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

该页面的我的<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

Answer 1

因此，显然Reactive表单不能与 ChangeDetectionPush 一起很好地工作，您是否正在使用 ChangeDetectionPush ？如果是这样：

我知道这不是最佳选择，但是我发现 ChangeDetectorRef 可以解决此问题，从而迫使用户界面刷新（由于 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的日期格式不同，因此导致了错误。 ew！

物料日期选择器验证不适用于FormBuilder.patchValue（）

2 个答案: