각도 NGRX/Observables and Reactive Forms

Question

현재 저장소 및 반응 형 형태로 NGRX를 사용하는 프로젝트가 있습니다.

내 응용 프로그램에서는 내 상태의 활성 항목을 반응 형 양식에 매핑하려고합니다. 그래서 내 구성 요소에서 내가 좋아하는 뭔가가 있습니다

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) { } 

} 

: 가게에 가입하고 내 아이템을 선택하는 것을 방지하기 위해

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

} 

을, 나는 나의 형태로 나의 관찰에 결합 할 수있는 지침을 만들어

이제 내 양식에 단순히과 같이 바인딩 :

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

내 질문은 :

• 이것은 좋은 생각입니까/이것을 처리하는 더 좋은 방법이 있습니까?

복잡한 시나리오의 끝 부분에서 구성 요소의 관찰 가능 부분을 구독해야합니다.

Answer 1

아니요, 이것은 나에게 나쁜 습관으로 보입니다. 양식은 상위보기 구성 요소 내에서 사용되는 자체 구성 요소 여야합니다. 그런 다음 에디션 용인 경우 @Input 데코레이터로 데이터를 전달할 수 있습니다.

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

를 양식 구성 요소에서이 작업을 수행 할 수 있습니다 :

은 따라서 상위 구성 요소에서 당신은 같은 것을 할 것

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

, 당신은 사용 ReactiveForms와 폼 컨트롤을 사용하지 않으려면 disable 방법.