La validation du sélecteur de date ne fonctionne pas avec FormBuilder.patchValue()

Question

J'ai un formulaire qui demande à l'utilisateur d'entrer une date, le bouton d'envoi est grisé jusqu'à ce qu'il le fasse. Cela fonctionne parfaitement jusqu'à ce que je doive modifier le formulaire. Pour une raison quelconque, la validation ne prend pas en compte l'horodatage qui remplit le champ de la date lorsque j'utilise la fonction FormBuilder 's patchValue() comme suit :

Dans le constructeur de ma page, je construis mon formulaire (les autres champs sont supprimés pour des raisons de concision) :

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

Ensuite, dans mon ngOnInit() Je fais une requête pour obtenir la date de sortie de ma base de données, puis je l'exécute :

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

Tous les autres champs de mon formulaire sont validés (en vérifiant les classes ajoutées par angular je vois ng-valid) sauf le champ date (où la classe reste ng-invalid) jusqu'à ce que je tape un caractère dans ce champ.

Voici à quoi cela ressemble lorsque je charge la page d'édition, comme vous pouvez le voir, le bouton d'envoi est grisé bien que les champs soient remplis :

Voici le html de mon sélecteur de date matériel :

<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>

Et mon module.ts pour cette page :

@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

Il semblerait donc que les formulaires réactifs ne fonctionnent pas bien avec ChangeDetectionPush utilisez-vous ChangeDetectionPush ? Si c'est le cas :

Je sais que ce n'est pas optimal, mais j'ai trouvé ChangeDetectorRef pour résoudre ce problème, en forçant l'interface utilisateur à se rafraîchir (il ne sait pas que votre modale a changé depuis le début de la session). ChangeDetectionPush est activée)

Constructeur :

constructor(
  private cdr: ChangeDetectorRef
)

Mise à jour des données :

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

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

Answer 2

Eh bien... il m'a fallu environ un an, mais j'ai finalement trouvé la solution. Il s'avère qu'au chargement de la page, je recevais un matDatepickerMin erreur du validateur. C'est parce que mon [min]="date" que j'utilisais était définie comme suit :

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

Alors qu'il fallait que ce soit le cas :

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

Le format de la date min étant différent du format de la date que j'utilisais pour patchValue Il était à l'origine de l'erreur. Je m'en réjouis !