Проверка выбора даты материала не работает с FormBuilder.patchValue () - PullRequest
0 голосов
/ 30 января 2019

У меня есть форма, которая требует от пользователя ввода даты, кнопка отправки неактивна, пока он не сделает этого.Это работает отлично, пока я не отредактирую форму.По какой-то причине проверка не берет мою метку времени, которая заполняет поле даты, когда я использую метод FormBuilder patchValue(), например:

В конструкторе страниц я создаю свою форму (другие поля удаленыдля краткости):

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

Затем в моем ngOnInit() я запрашиваю releaseDate из моей базы данных и запускаю:

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

Все остальные поля из моей формы проверены(при проверке классов, добавленных с помощью angular, я вижу ng-valid) за исключением поля даты (где класс остается ng-valid), пока я не введу символ в это поле.

Вот как это выглядит, когда язагрузите страницу редактирования, поскольку вы можете видеть, что кнопка отправки неактивна, хотя поля заполнены:

enter image description here

Вот мой сборщик дат материала 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]
})

1 Ответ

0 голосов
/ 30 января 2019

Таким образом, очевидно, что реактивные формы плохо работают с ChangeDetectionPush используете ли вы ChangeDetectionPush ?Если так:

Я знаю, что это не оптимально, но я нашел ChangeDetectorRef , чтобы решить эту проблему, заставив обновить интерфейс пользователя (Он не знает, что ваш мод изменился с ChangeDetectionPush включено)

Конструктор:

constructor(
  private cdr: ChangeDetectorRef
)

Обновление данных:

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

 this.cdr.detectChanges(); // This is magic
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...