How to easily create form in Angular

Bravelab
Bravelab Developers

Read time: 9 min

Mar 06, 2020

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.

Bravelab
Bravelab Developer who is detail-oriented, enthusiastic about data analysis and highly focused on implementing modern solutions to help out business to grow.

Read time: 9 min

Mar 06, 2020

Our mission is to be /trusted partner
to our clients/
in the field of webplatform
development & staff augmentation

Check our rank

developmentclutchdevelopment
  • development
  • clutch
Item 1 of 3

0 Professionals

0 Finished project

Kudos.

  • “Not afraid of doing even the most difficult tasks and proposing innovative solutions. They don’t avoid challenges, rely on new technologies, and - most importantly - always carry the projects through from the beginning to the end.”

    Adam Bogdan
    Adam Bogdan Python Developer
Item 1 of 9

Contact.

We're happy to help! Leave your contact data, and we will get in touch with you within one business day.

Tell us about your needs, ask about our experience, portfolio, and even partnership programs.

Contact us

This website stores cookies on your computer. These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience & for analytics & metrics about our visitors both on this website & other media.
To find out more about the cookies we use, see our Privacy Policy.