如何将 dd/mm/yyyy 日期格式应用于 Angular 中的反应式表单控件

Question

我有一个反应式表单，其中我们使用日期输入类型。 表单控件在循环内绑定，在这种情况下，我无法应用日期管道，因为没有 ngmodel 绑定到它。

预计日期控制：dd/mm/yyyy

目前的绑定方式是这样的：

Stackblitz，我在其中尝试了我的代码：https://stackblitz.com/edit/angular-date-input-using-reactive-forms-a4yyn5?file=app%2Fapp.component.ts

以下html模板代码：

 <form [formGroup]="loginForm">
 <div *ngFor="let order of [0, 1, 2]; let i = index">
  <label formArrayName="requestdate">
     <input type="date" rows="1" class="form-control" [formControlName]="i" />
   </label>
 </div>
 </form>

以下 TYPESCRIPT 代码

 import { Component } from '@angular/core';
 import { FormArray, 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: new FormArray([])
  })

 }

 get requestDatesArray(){
  return this.loginForm.controls['requestdate'] as FormArray;
 }

}

有人可以帮我们绑定 dd/mm/yyyy 格式的日期控件吗？

Answer 1

您代码中的问题是您没有在 ts 代码中绑定表单控件 所以最好的解决方案是在获得数组 [0,1,2] 后添加表单控件以形成数组，如下所示：

HTML

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <div *ngFor="let order of requestDatesArray.controls; let i = index">
    <label formArrayName="requestdate">
      <input type="date" rows="1" class="form-control" 
        [formControlName]="i" />
    </label>
  </div>
  <button type="submit">SUbmit</button>
</form>

打字稿

  loginForm: FormGroup;
  yourArr = [0, 1, 2]
  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      requestdate: new FormArray([])
    })
    this.yourArr.forEach(el => {
      this.addToFormArray(el)
    })


   }
  addToFormArray(el:number) {
    let control = new FormControl(el)
    this.requestDatesArray.push(control)
  }
  onSubmit() {
    console.log(this.loginForm)
  }

  get requestDatesArray(){
    return this.loginForm.controls['requestdate'] as FormArray;
  }