如何格式化 Angular Reactive Form Control 值

Question

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

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

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

我的 typescript 文件如下：

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)),
  });
}