ReactiveFormはAsyncPipeと相性が悪い

AngularのReactiveFormはAsyncPipeと相性が悪い理由

Updateの時に、Inputタグに事前に既存のデータを入れたいという要件がある。その時、ContainerComponentでasync pipeで取得するためにはPresentationComponentで以下のように定義する

@Input value?: string | null

TemplateDrivenの場合、以下のように値を入れることができる

<input [(ngModel)]="value">

しかしReactiveFormの場合、PresentationComponentでこのように定義する必要がある。

control: FormControl
@Input value?: string | null;
constructor() {
  this.control = new FormControl(this.value || null)
}

ngOnChange() {
  if(this.value) {
	this.control.setValue(this.value)
   }
   
}

このように、Formを定義するためのコード量がTemplateDrivenよりも圧倒的に多くなる。

Licensed under CC BY-NC-SA 4.0
comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy