角度NGRX /オブザーバブルと反応形式

Question

現在、私は店舗と反応型のためにNGRXを使用するプロジェクトを持っています。

私のアプリケーションでは、自分の状態のアクティブな項目を反応形式にマップしたいと思います。だから私のコンポーネントで、私のようなものがあります：ストアを購読し、私の項目を選択することを避けるために

export class MyComponent { 

    active$: Observable<any>; 

    form = this.fb.group({ 
     name: ['', [Validators.required]], 
     description: ['', Validators.maxLength(256)] 
    }); 

    constructor(private fb: FormBuilder, private store: Store<any>) { 
     this.active$ = store.select(store => store.items); 
    } 

} 

を、私は自分のフォームに私の観測可能と結合するディレクティブを作成しました：

import { Directive, Input } from '@angular/core'; 
import { FormGroupDirective } from '@angular/forms'; 

@Directive({ 
    selector: '[connectForm]' 
}) 
export class ConnectFormDirective { 

    @Input('connectForm') 
    set data(val: any) { 
     if (val) { 
      this.formGroupDirective.form.patchValue(val); 
      this.formGroupDirective.form.markAsPristine(); 
     } 
    } 

    constructor(private formGroupDirective: FormGroupDirective) { } 

} 

今私の形で、私は単純にそうようにそれをバインドします

<form [formGroup]="form" novalidate (ngSubmit)="onSubmit()" [connectForm]="active$ | async"> 

私の質問は：

• これは良いアイデアですか/これを処理する良い方法がありますか？

複雑なシナリオでは、コンポーネントの監視対象に加入しなくてはならないと思います。

Answer 1

いいえ、これは私にとっては悪い習慣のようです。フォームは、親ビューコンポーネント内で使用される独自のコンポーネントである必要があります。 @Inputデコレータを使ってデータを渡すことができます。あなたが使用し、ReactiveFormsでフォームコントロールを無効にするには

ngOnInit{ 
    if(this.data) 
     this.form.patchValue(this.data) 
} 

：

<form-component [data]="active$ | async"></form-component> 

そして、あなたがこれを行うことができ、フォームのコンポーネントで：

は、だからあなたの親コンポーネントでは、このような何かをするだろうdisableメソッド。