What is the best way to kickstart a Reactive Angular 2 form by utilizing an Observable?

Question

What is the best way to kickstart a Reactive Angular 2 form by utilizing an Observable?

My current strategy involves storing the form values in my ngrx store so that users can easily navigate around the site and return to the form if needed. The concept is to have the form values repopulate from the store using an observable.

This is how I am currently implementing it:

constructor(private store: Store<AppState>, private fb: FormBuilder) {
    this.images = images;
    this.recipe$ = store.select(recipeBuilderSelector);
    this.recipe$.subscribe(recipe => this.recipe = recipe); // console.log() => undefined
    this.recipeForm = fb.group({
      foodName: [this.recipe.name], // also tried with an OR: ( this.recipe.name || '')
      description: [this.recipe.description]
    })
  }

The store receives an initial value, which seems to be correctly passing through my selector function. However, by the time the form is being created, it appears that the value has not returned yet. As a result, this.recipe remains undefined.

Is this approach incorrect, or is there a way to ensure that the observable is returned before creating the form?

angular typescript observable ngrx angular-reactive-forms

Answer 1

Answer №1

When it comes to handling observables, it may seem like adding another layer will complicate things. However, breaking down a single component into a container component and a presentational component actually makes it easier.

The container component solely deals with observables without concerning itself with presentation. Data from observables is passed to the presentational component through @Input properties while utilizing the async pipe:

@Component({
  selector: "recipe-container",
  template: `<recipe-component [recipe]="recipe$ | async"></recipe-component>`
})
export class RecipeContainer {

  public recipe$: Observable<any>;

  constructor(private store: Store<AppState>) {
    this.recipe$ = store.select(recipeBuilderSelector);
  }
}

The presentational component only receives simple properties and does not interact directly with observables:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "recipe-component",
  template: `...`
})
export class RecipeComponent {

  public recipeForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.recipeForm = this.formBuilder.group({
      foodName: [""],
      description: [""]
    });
  }

  @Input() set recipe(value: any) {
    this.recipeForm.patchValue({
      foodName: value.name,
      description: value.description
    });
  }
}

The concept of using container and presentational components follows the general Redux idea, as detailed in Presentational and Container Components.

Answer 2

When it comes to handling observables, it may seem like adding another layer will complicate things. However, breaking down a single component into a container component and a presentational component actually makes it easier.

The container component solely deals with observables without concerning itself with presentation. Data from observables is passed to the presentational component through @Input properties while utilizing the async pipe:

@Component({
  selector: "recipe-container",
  template: `<recipe-component [recipe]="recipe$ | async"></recipe-component>`
})
export class RecipeContainer {

  public recipe$: Observable<any>;

  constructor(private store: Store<AppState>) {
    this.recipe$ = store.select(recipeBuilderSelector);
  }
}

The presentational component only receives simple properties and does not interact directly with observables:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "recipe-component",
  template: `...`
})
export class RecipeComponent {

  public recipeForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.recipeForm = this.formBuilder.group({
      foodName: [""],
      description: [""]
    });
  }

  @Input() set recipe(value: any) {
    this.recipeForm.patchValue({
      foodName: value.name,
      description: value.description
    });
  }
}

The concept of using container and presentational components follows the general Redux idea, as detailed in Presentational and Container Components.

Answer 3

Answer №2

When faced with this situation, there are two effective options to consider...

Choice 1:

To show or hide the form in the HTML, you can utilize the *ngIf directive like so:

<form *ngIf="this.recipe">...</form>

Choice 2: Implement the async pipe in your template and structure your model as follows:

component

model: Observable<FormGroup>;    
...
this.model = store.select(recipeBuilderSelector)
    .startWith(someDefaultValue)
    .map((recipe: Recipe) => {
        return fb.group({
            foodName: [recipe.name],
            description: [recipe.description]
        })
    })

template

<app-my-form [model]="(model | async)"></app-my-form>

It is important to ensure proper handling of updates to both the store and the current model.

Answer 4

When faced with this situation, there are two effective options to consider...

Choice 1:

To show or hide the form in the HTML, you can utilize the *ngIf directive like so:

<form *ngIf="this.recipe">...</form>

Choice 2: Implement the async pipe in your template and structure your model as follows:

component

model: Observable<FormGroup>;    
...
this.model = store.select(recipeBuilderSelector)
    .startWith(someDefaultValue)
    .map((recipe: Recipe) => {
        return fb.group({
            foodName: [recipe.name],
            description: [recipe.description]
        })
    })

template

<app-my-form [model]="(model | async)"></app-my-form>

It is important to ensure proper handling of updates to both the store and the current model.

What is the best way to kickstart a Reactive Angular 2 form by utilizing an Observable?

Answer №1

Answer №2

Similar questions

Retrieve data from FileReader's onload event asynchronously in Javascript

Create a Jest test environment with MongoDB and TypeScript, following the guidance provided in the Jest documentation

Webpack does not support d3-tip in its current configuration

What is the best way to loop through an object while keeping track of its value types

Typescript error message TS2314: One type argument is required for the generic type 'Array<T>'

"Experience the seamless navigation features of React Navigation V6 in conjunction with

Conceal or eliminate webpack from Angular 2 framework

The NestJS framework encountered an error due to a method being undefined in the

Encountered an error while trying to load a resource on ionic emulate

What is the best way to format a string into a specific pattern within an Angular application

Can I integrate @types/pkg into my custom library to automatically have types included?

What is the TypeScript term for assigning multiple parameters an alias?

The issue with the demo variable not functioning properly within the ngOnChanges method of the child component

Tips for removing data from documents that include automatically generated IDs

A guide on transforming JSON data to an array format where nested arrays are encapsulated within objects using curly braces instead of square brackets in TypeScript

Creating a submodule in Angular is a great way to organize and modular

Error encountered when attempting to retrieve token from firebase for messaging

Dealing with name conflicts in Typescript when using multiple interface inheritance

connect the validation of forms to different components

How can I personalize a Leaflet popup with image thumbnails and additional customization options?