web-dev-qa-db-fra.com

Angular matériau 2 datepicker avec [ngmodel]

J'essaie de lier ma propriété date à l'entrée mat-datepicker en tant que partie d'un groupe de formulaires réactif. Toutes mes méthodes ne fonctionnaient pas, mon bouton d'envoi étant défini sur désactivé, sauf si le formulaire est valide:

<mat-form-field fxFlex>
  <input matInput [matDatepicker]="datepicker1" placeholder="Start Date" formControlName="startingDate" required>
  <mat-datepicker-toggle matSuffix [for]="datepicker1"></mat-datepicker-toggle>
  <mat-datepicker touchUi="true" #datepicker1></mat-datepicker>
</mat-form-field>

Composant.ts:

start: Date.now()
startDate: "1/1/2018"
this.ShiftForm = new FormGroup({
  startingDate: new FormControl(this.startDate),
  startTime: new FormControl(),
  endingDate: new FormControl(this.endDate),
  endTime: new FormControl(),
});

Méthodes qui n'ont pas fonctionné:

  1. Ajout de [(ngModel)]="startDate" au champ de saisie
  2. Ajout de [ngModel]="startDate" au champ de saisie
  3. Préchargement du formulaireContrôle avec la valeur: startingDate: new FormControl(this.startDate),

Méthodes ayant fonctionné de manière partielle mais non satisfaisante:

  1. Ajout de [value]="startDate" au champ de saisie: date affichée mais non lue par le formulaire réactif, ce qui signifie que le bouton d'envoi reste désactivé car le formulaire n'est pas valide. Pour le rendre valide, je dois définir la date manuellement (en tapant ou en utilisant le sélecteur de date)
  2. Ajout de [ngModel]="startDate" en supprimant [matDatepicker]="datepicker1" du champ de saisie: date affichée mais suppression de l’accès au sélecteur de date.

Tout ce dont j'ai besoin, c'est du [ngModel] pour fonctionner comme il se doit afin que le formulaire réactif le lise.

Aide beaucoup beaucoup apprécié!

EDIT Voici mon groupe de formulaires:

this.ShiftForm = new FormGroup({
  startingDate: new FormControl(this.startDate),
  startTime: new FormControl(),
  endingDate: new FormControl(this.endDate),
  endTime: new FormControl(),
});

C'est le HTML:

<form [formGroup]="ShiftForm" fxLayout="column" fxLayoutAlign="center stretch">
<mat-form-field fxFlex>
  <input matInput [matDatepicker]="datepicker1" placeholder="Start Date" [formControlName]="startingDate" required>
  <mat-datepicker-toggle matSuffix [for]="datepicker1"></mat-datepicker-toggle>
  <mat-datepicker touchUi="true" #datepicker1></mat-datepicker>
</mat-form-field>
..
..
..
</form>

C'est l'erreur que j'obtiens maintenant:

Erreur: Impossible de trouver le contrôle avec l'attribut de nom non spécifié

javascriptangularformsdatepickermaterial-design
4
Omer Shukar

Angular propose deux manières d’utiliser les formulaires: basé sur un modèle ou réactif . Vous mélangez les deux, alors que vous devez choisir celui que vous voulez utiliser. La documentation peut vous guider dans ce choix.

Si vous choisissez un modèle, vous pouvez utiliser [(ngModel)] (comme votre méthode 1).

<input matInput [matDatepicker]="datepicker1" placeholder="Start Date" [(ngModel)]="startDate" required>

startDate = new Date();

Choisissez réactif et vous pouvez utiliser [formControl] avec une FormControl dans votre contrôleur (comme votre méthode 3).

<input matInput [matDatepicker]="datepicker1" placeholder="Start Date" [formControl]="startDate">

startDate = new FormControl(new Date(), Validators.Required);
// Use `startDate.value` to get the value of the control

N'utilisez jamais [value] si vous ne savez pas ce que vous faites ou si vous obtiendrez des résultats inattendus.

5
Manduro

Résolu, Merci @ Manduro de m'aider à traverser cette

this.startDate était une chaîne, alors que Datepicker ne traduisait que des dates.

Finalement, c’est ce que j’ai ajouté pour que cela fonctionne.

startingDate: new FormControl(moment(this.startDate).format())

HTML: 

<mat-form-field fxFlex>
  <input matInput [matDatepicker]="datepicker1" placeholder="Start Date" formControlName="startingDate" required>
  <mat-datepicker-toggle matSuffix [for]="datepicker1"></mat-datepicker-toggle>
  <mat-datepicker touchUi="true" #datepicker1></mat-datepicker>
</mat-form-field>
0
Omer Shukar