April 1, 2019

Refactorable reactive forms in angular

Problem

When creating forms with Angular, many accesses take place in the template using strings. This makes it difficult to perform refactorings automatically. It would be so desirable:

Status quo

Also the FormBuilder does not manage to get the problems better under control. It is only a help for the creation of the data structure within the component class. No matter if the FormGroup is created with the own call of new FormGroup() or with the FormBuilder, in both cases only inline instances of the single FormControls end up in the group.

 

Way to go

First and foremost, we are only concerned with the individual FormControl instances that we want to use in the template. In the first step I go here and drag the inline specified map of the FormControls from the constructor of the FormGroup into a new instance variable of the component class.

The initialization of the individual FormControl is changed to zero. This is necessary because the data will not be available at that time. All inputs were set in the OnInit phase. From this point on it is safe to write the data to the group using this.form#patchValue .

This change allows me to bind [FormControl] with the new variable formModel  in the template. The IDE can support me with auto completion.

The only thing that’s missing is the possibility to let Typescript support me with future changes. In most cases we choose our form structure so that we can work directly with form.value. In type script this simply means that form.value corresponds to the type Partial<Todo> . Now we want to have a type in our hand that has the same keys, but whose values all have the type FormControl. This can be expressed in type script as follows: {[key in keyof Todo]?: FormControl} . So from now on we will use this type for our Map formModel. Now the IDE is able to support us with changes at our interfaces also in our forms. And that not only in our type script code but also in the rather fragile connection between the template and our component class.

You can find the complete code on Github.

Also an interesting approach can be found here https://ruanbeukes.net/angular-typesafe-reactive-forms/

Sascha Engmann
Developer at thecodecampus </>


Leave a Reply

Add code to your comment in Markdown syntax.
Like this:
`inline example`

```
code block
example
```

Your email address will not be published.