如何格式化 Angular Reactive Form Control 值

Question

如果我有一个如下所示的 Angular 表单控件，那么推荐的格式化值的方法是什么？

例如我可以从数据库返回一个包含秒和毫秒等的日期字段。如何格式化这是与日期管道类似的方式，所以我只显示日、月、年等？

<input type="text" [formControl]="date">

我的打字稿文件如下：

export class MyForm {

   form: FormGroup;

   ngOnInit(): void {
     this.setupForm();

     this.httpService.get(5).subscribe((response) => {
       this.form.patchValue(response);
     });
   }

   setupForm(): void {
     this.form = new FormGroup({
       date: new FormControl('')
     });
   }
}

Answer 1

您需要在创建控件并在 FormGroup 中分配值时格式化值：

const form = new FormGroup({
  date: new FormControl(datePipe.transform(yourData.date, yourFormat)),
});

如果您需要从服务调用中填充您的值，您可以在服务调用完成后实例化表单：

ngOnInit(): void {
  this.httpService.get(5).subscribe((response) => {
    if (response) {
      this.setupForm(response);
    }
  });
}

setupForm(data): void {
  this.form = new FormGroup({
    date: new FormControl(datePipe.transform(data.date, yourFormat)),
  });
}