Sharing Top Content from the Angular-sphere.

Reactive Angular Forms with NGRX – Austin – Medium

  • I’m going to show you the different ways to put these two pieces of technology together.The problemWhen we subscribe to our store in our components, it returns a observable.
  • You probably have something like this somewhere in your application.@Component({ … })export class MyComponent { constructor(private store: StoreAppState, private formBuilder: FormBuilder) {} ngOnInit() { const form$ = this.store.select(state = state.form); const formBuilder = this.formBuilder.group({ name: [”] }); }}As you can see here, I have my form state but I can’t…
  • Subscribe to observable and patch the value.@Component({ … })export class MyComponent { constructor(private store: StoreAppState, private formBuilder: FormBuilder) {} ngOnInit() { const form$ = this.store.select(state = state.form); const formBuilder = this.formBuilder.group({ name: [”] }); this.form$.
  • subscribe(data = formBuilder.patchValue(data)); }}This doesn’t introduce any extra boilerplate but now we have to deal with unsubscribing from the observable.3.
  • Create a custom directive to bind the form automatically.@Directive({ selector: ‘[connectForm]’ })export class ConnectFormDirective { @Input(‘connectForm’) set data(val: any) { if (val) { } } constructor(private formGroupDirective: FormGroupDirective) {}}then in our form we can just hook it up really cleanly like:@Component({ template: ` form [formGroup]=”form” [connectForm]=”form$ | async”…/form `})export class…

Reactive forms are great, NGRX is great but how do you use them together? I’m going to show you the different ways to put these two pieces of technology together. When we subscribe to our store in…

Reactive Angular Forms with NGRXReactive forms are great, NGRX is great but how do you use them together? I’m going to show you the different ways to put these two pieces of technology together.The problemWhen we subscribe to our store in our components, it returns a observable. On the other hand, our reactive forms expect a raw object to bind the values to it. You probably have something like this somewhere in your application.@Component({ … })export class MyComponent { constructor(private store: StoreAppState, private formBuilder: FormBuilder) {} ngOnInit() { const form$ = this.store.select(state = state.form); const formBuilder = this.formBuilder.group({ name: [”] }); }}As you can see here, I have my form state but I can’t bind it to my form builder because its a observable.How do we solve this?There are 3 different ways I’ve approached this problem before:Create a child component that contains the form that the host component binds it with a input and async pipe.@Component({ template: ` my-form [data]=”form$ | async”/my-form `})export class MyComponent { form$ = this.store.select(state = state.form); constructor(private store: StoreAppState) {}}This is a nice approach but it creates extra boiler plate.2. Subscribe to observable and patch the value.@Component({ … })export class MyComponent { constructor(private store: StoreAppState, private formBuilder: FormBuilder) {} ngOnInit() { const form$ = this.store.select(state = state.form); const formBuilder = this.formBuilder.group({ name: [”] }); this.form$.subscribe(data = formBuilder.patchValue(data)); }}This doesn’t introduce any extra boilerplate but now we have to deal with unsubscribing from the observable.3. Create a custom directive to bind the form automatically.@Directive({ selector: ‘[connectForm]’ })export class…

Reactive Angular Forms with NGRX – Austin – Medium

Comments are closed, but trackbacks and pingbacks are open.