Блог

Как я могу привязать дату к селектору даты?

 const TodayDate = "19-11-2020";
ngOnInit() {
  this._MyregisterForm = this.formBuilder.group({
    today_Date:[this.TodayDate, [Validators.required]]
  });
}
 

HTML

 <form [formGroup]="_MyregisterForm" (ngSubmit)="onSubmit()">
  <input type="date" formControlName="today_Date" value="{{TodayDate}}">
</form>
 

Нет необходимости вводить value атрибут во ввод при использовании formControlName

Демонстрация Stackblitz

component.html

 <form [formGroup]="_MyregisterForm" (ngSubmit)="onSubmit()">
    <input type="date" formControlName="today_Date">
    <button type="submit">Submit</button>
</form>
 

component.ts

 import { Component, VERSION } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { DatePipe } from "@angular/common";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  providers: [DatePipe]
})
export class AppComponent {
  _MyregisterForm: FormGroup;
  TodayDate = "19-11-2020";

  constructor(private formBuilder: FormBuilder, private datePipe: DatePipe) {
    this._MyregisterForm = this.formBuilder.group({
      today_Date: [this.getTransformedDate(this.TodayDate), Validators.required]
    });
  }

  private getTransformedDate(date) {
    let date1 = date.split("-");
    let newDate = date1[2]   "-"   date1[1]   "-"   date1[0];
    return newDate;
  }

  onSubmit() {
    const date = this.datePipe.transform(
      this._MyregisterForm.get("today_Date").value,
      "dd-MM-yyyy"
    );
    alert(date);
  }
}
 

Удалить value="{{TodayDate }}" Вы привязываете элемент управления к значению TodayDate, и этого достаточно.

Я бы постарался сохранить даты как даты javascript в вашем приложении. Это упростит их форматирование по-разному и использование с помощью средства выбора даты angular materials.

используйте библиотеку date-fns для преобразования строки в дату.

https://date-fns.org/v2.16.1/docs/parse

Затем передайте эту дату в FormBuilder.

Я предоставляю Stackblitz только здесь.

Формат даты не подходит, вам нужно использовать международный формат. Более того, как все говорили, вам не нужно привязывать a value .

 _MyregisterForm: FormGroup;
TodayDate = "2020-12-10";

constructor(private formBuilder: FormBuilder) {
  this._MyregisterForm = this.formBuilder.group({
    today_Date: [this.TodayDate, Validators.required]
  });
}
 

 <form [formGroup]="_MyregisterForm">
    <input type="date" formControlName="today_Date">
</form>
<pre>{{ _MyregisterForm.value | json }}</pre>
 

TodayDate должно быть;

 TodayDate = new Date();
 

и удалить value атрибут из input