Question

我正在尝试设置带时间的datepicker控件的值。无法完成

尝试转换为所需格式

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>

这是您推荐的Working Sample StackBlitz。

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

1 个答案: