web-dev-qa-db-ja.com

リアクティブフォームの日付入力値を設定するにはどうすればよいですか？

だから私は入力のためにこの日付を表示しようとしています。しかし、フォームビルダーグループで値を設定するときに表示されません。それもフォーマットできるようにしたいです。

this.post.startDateは日付タイプです

.tsのいただきました

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

私の反応フォームにはこれがあります

<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

もう1つの解決策は、タイムゾーンオフセットをもう少し機能的にし、バインディングとフォーマット変換を追加することです。

.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 });
  }

次に、コードで必要に応じて、myDate変数で取得したフォーマットを変更できます。

例：2019-10-13から20191013

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

finalDate = stringFormat(myDate);
0
Alejandro Araujo