How to easily create form in Angular

We would like to present to you how to create a form with fields that dynamically react to user events.

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.

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.

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.

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.

Stay connected

Don't miss out on gaining more insights – opt-in to our monthly newsletter, and stay ahead in the ever-evolving world of music technology!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

By submitting this form, you confirm that you have read and agree to the Terms & Conditions.

Table of Contents

YOU MAY ALSO LIKE

Need help?

No matter if you are just getting started or have an advanced concept - reach out to us and let's discuss.

Maciej Dulski

Maciej Dulski
Senior Business Consultant

In need of software development?

At Brave we specialise in Web Software Development. We wiil help you to get your project done.

CONTACT

LET’S TALK

FILL IN THE FORM BELOW, OR REACH OUT TO US DIRECTLY — OFFICE@BRAVELAB.IO

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.