web-dev-qa-db-fra.com

Comment puis-je définir ma valeur d'entrée de date de formulaire réactif?

J'essaie donc d'afficher cette date pour une entrée. Mais il ne s'affiche pas lors de la définition de sa valeur dans mon groupe de création de formulaire. J'aimerais aussi pouvoir le formater aussi.

this.post.startDate est de type Date

Contenu en .ts

this.editForm = this.formBuilder.group({
      startDate: [this.post.startDate, Validators.compose([Validators.required])],
      endDate: [this.post.endDate, Validators.compose([Validators.required])]
    });

Ma forme réactive a ceci

<form [formGroup]="editForm" (ngSubmit)="saveDate()">

        <label>Start Date: </label>
        <input type="date" formControlName="startDate" name="startDate" />

        <br />
        <label>End Date: </label>
        <input type="date" formControlName="endDate" name="endDate" />

        <br /><br />
        <input type="submit" value="Create Date">

      </form>
angulartypescriptangular7
7
Jade

Autre solution, un peu plus fonctionnel avec décalage de fuseau horaire, en ajoutant la liaison et la transformation de format:

.html:

<form [formGroup]="form">
<input type="date" class="form-control" (change)="onMyDateChange($event)" name="myDate" formControlName="myDate" value="{{ actualDateFormGroup | date:'yyyy-MM-dd' }}" >
</form>

.ts:

 actualDateFormGroup = new Date(new Date().getTime() - (new Date().getTimezoneOffset() * 60000)).toISOString().split("T")[0];

 onMyDateChange(event: any) {
    this.forma.patchValue({ myDate: event.target.value });
  }

Vous pouvez ensuite modifier le format obtenu dans la variable myDate selon les besoins du code.

Par exemple: 2019-10-13 à 20191013

 stringFormat(string){
  let date = fechaString.replace(/-/g, '');
  return date;
  }

finalDate = stringFormat(myDate);
0
Alejandro Araujo