How to easily create form in Angular

This article shows you how to start with Reactive Form in Angular. We would like to present to you how to create a form with fields that dynamically react to user events.

Agnieszka Fierek
Agnieszka Fierek
March 6, 20209 min read
How to easily create form in Angular

Before you start implementing form structure, you should import ReactiveFormsModule to your module. It is very important because we want to create FormGroup. FormGroup aggregates objects in the form of FormControl, where the fields are defined dependencies and options. One FormControl object has a field name, first value and validators.

To create a FormGroup, we use Form Builder, which is Bob the Builder for forms. The data defined in this way is very clear to other programmers because all the structures are visible. There is one more trick to create a form. Instead of adding a method in the component, you add it in Service with return Form Group. Why? This solution gives you a code that you can use many times. I had a situation where I represent form structure in three different components. First time when the object was created, the next when it was editing and the last one when the user changes status and application wants to show added data.

The code below shows you the implementation of a simple form. In an Html file, you have to add an Html form tag that will have a connection with a group using the [formGroup] directive. This form contains fields that are related to a specific FormControl using the formControlName attribute. 

See the Pen Simple Form by Agnieszka Fierek (@agnieszka-fierek) on CodePen.

 

Angular provides several simple but very often used validators such as required, email, pattern, and more. You can add Validators when you define FormControl or use method setValidators() to add when FormControl should dynamically respond to user events. Of course, you can implement your custom Validators. The code below shows you how to do this.

See the Pen Validator by Agnieszka Fierek (@agnieszka-fierek) on CodePen.

 

How to implement an array in form? 

The implementation is not complicated, but it's worth seeing how to do it. In ReactiveFormsModule there is a class FormArray, which is used to aggregate FormGroup in the list. First, you should define FormGroup and next push this object into the array. In the beginning, the code in the Html file may seem a little odd because we should define a FormArray name in formArrayName, and next in the loop it’s defined formGroupName, which is determined by loop index values. The loop contains the fields of a defined group.

See the Pen dyoJGVK by Agnieszka Fierek (@agnieszka-fierek) on CodePen.

 

Angular 8 resolved a  major problem with resetting FormArray. They add one ideal method reset(). In previous versions, it was recommended to iterate and delete objects or re-create FormArray.  

When you create a good form structure, you can resolve the problem with sending values to the API server because you can use `this.form.value` which gives you all data defined in your FormGroup.

{
    title: "Workshop",
    description: "Team Competency Matrix",
    publishDate: Sun Mar 01 2020 00:00:00 GMT+0100,
    expirationDate: Tue Mar 31 2020 00:00:00 GMT+0200,
    questions: [
        {
            question: "What do you think about this workshop?"
        }
    ]
}

Reactive forms can be a tad challenging for the beginners but give much more flexibility in designing and in implementation. The solution presented in the article is to implement a FormGroup that corresponds to the business logic. The code becomes more comprehensive and correlates to the actual functionality.

Here, you can find a simple project which shows the implementation of Reactive Forms in Angular.

Agnieszka Fierek
written by
Agnieszka Fierek

Frontend developer with knowledge of a variety of technologies, like Angular, TypeScript, and Python. Professional who knows that team playing is one of the most important things in programming.

Let’s get the cooperation started!

See how we can help your business become more efficient

Get started!

Find us on