如何使用 patchValue 在 angular 反应形式中设置日期

Question

我正在尝试用时间设置日期选择器控件的值。无法完成

已尝试转换为所需格式

app.component.html:

<input id="requestdate" type="date" class="form-control" formControlName="requestdate"

app.component.ts:

ngOnInit() {

this.loginForm = this.formBuilder.group({ 
                    requestdate : ['']
                  })

let date = new Date()
date = date.toLocaleDateString().substring(0,10)

this.loginForm.get('requestdate').patchValue(date)


}

看不到转换后的日期

Answer 1

您在重新分配 date 变量时似乎使用了错误的语法。由于它被初始化为 Date，因此它不会接受您提供的格式的字符串。您必须使用 YYYY-MM-DD 格式。

试试这个：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loginForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      requestdate: ['']
    })
    this.loginForm.get('requestdate').patchValue(this.formatDate(new Date()));
  }

  private formatDate(date) {
    const d = new Date(date);
    let month = '' + (d.getMonth() + 1);
    let day = '' + d.getDate();
    const year = d.getFullYear();
    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;
    return [year, month, day].join('-');
  }
}

不要忘记将 input 字段包裹在 form 标签周围，并将 formGroup 属性设置为 loginForm:

<form [formGroup]="loginForm">
  <input
    id="requestdate" 
    type="date" 
    class="form-control" 
    formControlName="requestdate" />
</form>

Here's a Working Sample StackBlitz for your ref.

Answer 2

要将日期转换为 yyyy-MM-dd，您还可以使用 .toJSON() 方法：

private formatDate(date) {
    let newDate = new Date(date);
    return newDate.toJSON().split('T')[0];
}

如何使用 patchValue 在 angular 反应形式中设置日期

How to set the date in angular reactive forms using patchValue

bootstrap-datepicker

angular

angular7