如何使用 patchValue 以角度反应形式设置日期答案

【问题标题】：How to set the date in angular reactive forms using patchValue如何使用 patchValue 以角度反应形式设置日期
【发布时间】：2023-04-10 13:44:01
【问题描述】：

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

尝试转换为所需格式

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)


}

无法看到转换后的日期

【问题讨论】：

您是否使用任何库进行输入？
不，不使用任何库。日期类型的默认 html 输入

标签： angular angular7 bootstrap-datepicker

【解决方案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>

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

【解决方案2】：

对于到 yyyy-MM-dd 的日期转换，您还可以使用 .toJSON() 方法：

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

【讨论】：