Angular Forms: reactive design patterns catalog

[mohamed-gara]

This is a discussion for the post: Angular Forms: reactive design patterns catalog

[tripathiarpit]

Hey Gara!
I would like to understand something with following lines
{
provide: PersonCreationForm,
useFactory: (factory: PersonCreationFormFactory) => factory.create(),
deps: [PersonCreationFormFactory]
},
Why deps: [PersonCreationFormFactory], what is the role of this line in getting a depenency.

[mohamed-gara]

Hi Arpit,
Defining just useFactory: (factory: PersonCreationFormFactory) => factory.create() is not sufficient for Angular to determine what dependency to inject. At runtime, the parameter factory does not have the type PersonCreationFormFactory. The type exists only at the compile time. So, Angular adds the deps array to make the dependency injection possible.
I hope this is the response you are looking for.

[agarciabz]

Hi Mohamed,

That was a really interesting read. I'm used to write reactive forms in a single component so seeing these patterns applied for Angular is refreshing for me. I have two questions:

1. Could these patterns be reused for different components? For example: PersonForm for Person creation and Person edit.
2. Could you elaborate more on why Presentational/Container is an anti-pattern? Honestly it's the first time I hear this.

[mohamed-gara]

Hi Agustin,

1. Could these patterns be reused for different components? For example: PersonForm for Person creation and Person edit. => If the creation and edition forms have exactly the same structure, validation, and behavior, we can reuse the same Form Model for both. But, from my experience, the two forms are usually different even if they seem similar at first.
2. Could you elaborate more on why Presentational/Container is an anti-pattern? Honestly it's the first time I hear this. => As I know, the presentation/Container pattern is inspired by the React community. And now is considered an anti-pattern as you can see in the Update from 2019 section of Dan Abramov's post here. You can also see his presentation here
   Personally, I stopped using the pattern before reading Dan's new opinion for a simple reason. A component should focus on rendering the view and reacting to user actions. In complex applications, any other responsibility should be delegated to a service. We should not pollute the components tree with components that have no visual rendering. It's understandable to do it with a framework that has constraints. But, in Angular we have services.

This is just my humble opinion. Thanks for your feedback.

[agarciabz]

I see, thanks for the reply.

[yurakhomitsky]

So it looks like I will have to implement all methods that formGroup provides(setValue,getRawValue, etc) to make a good wrapper?
And How can I deal with the case when for example I need extra value to use in "ageIsGreaterThan" , which is not a part of form and can be changed over time

[yurakhomitsky]

This extra value might be passed by @input into component but how do I combine it with the stream that form wrapper provides

[mohamed-gara]

Sorry for not reacting. Recently, we faced this situation and we injected in the Form Model the data to be used for the form calculated values. So, the form wrapper has a model (injected in it's constructor) used for calculating some values.

[sricharan84]

@mohamed-gara
When using this pattern while writing unit test cases for PersonCreationFormComponent, I ended up with an issue
Failed: Can't resolve all parameters for PersonCreationForm (?) :

Can you please help me out here in case you have encountered it!

[mohamed-gara]

Do you added the following declaration on your component?

{
provide: PersonCreationForm,
useFactory: (factory: PersonCreationFormFactory) => factory.create(),
deps: [PersonCreationFormFactory]
},```

[DevJaGz]

Hi @mohamed-gara, I have some doubts:

My FormGroup Includes a FormArray, I would like to know in Which Part of the Schematic should I handdle the creation of the items (FormGroup) for the FormArray and also where should I updated from?

[DevJaGz]

@mohamed-gara Sorry, I have a another question with based on the isValid Observable, hope you can help me:

I got this constructor in a component:

In the Component Template I am showing the values for the observables, respectivelly for:

• First Pair: formIsDirty$ and formIsValid$
• Second Pair: formModel.isDirty$ and formModel.isValid$

However the secondone pair of values, formModel.isDirty$ and formModel.isValid$, are not updated as you can see in the next image. I think First Pair and Second Pair should have the same values and update at the same time, however no matter if the form has changed, the only Pair that is updated is the Firstone, formIsDirty$ and formIsValid$, the other one, formModel.isDirty$ and formModel.isValid$, always remains in a false value.

Do you know why this is happening?

[mohamed-gara]

I expect that this.formModel.isDirty$ has changed after the constructor initiated the formIsDirty$ value. So if you compare the two observables they won't be the same.

[DevJaGz]

Sorry for the delay. Thanks for you answer@mohamed-gara, I really appreciated. Yep that makes sense, however this.formModel.isDirty$ never change always is false, is rare, but I suppose that is because of something related with you said.

[mohamed-gara]

You should add the following code to your html: observables are the same: {{_$.formIsDirty === formModel.isDirty$}}

[DevJaGz]

Hello @mohamed-gara, hope you're well. I tested your suggestion and yep, they are not equal, but why? I matched them as it can be seen in the next image ( It also happened when I did the properties match in the constructor section ):

This is the isValid$ Getter:

I just wanna remain you that right now it is working but only using the formIsValid$ Component Property, the problem is when I try to use isValid$FormModel Property directly in the Component Template, isValid$FormModel Property alway remains in false ( If isValid$FormModel Property worked I would not have to use formIsValid$ Component Property ).