Advanced Angular Reactive Forms with Example

Advanced Angular Reactive Forms with Example

In my previous blog on basics of reactive forms in Angular, I've shared a quick overview of the basic definitions of libraries and how you can create a simple reactive form in your Angular application. I was happy to see the traffic & average reading timespan, I received on the blog. However, that was a basic overview and is a good start for the beginner Angular developers. But, for experienced angular developers, this is not it and we need more complexed scenario to handle with our reactive forms, making them more dynamic and handy.

To achieve that goal, we are going to cover a more advanced example here and will add bit complexity to it, only for our reference. Your actual scenario might differ and I am really hopeful that I shall be able to add some value to your development skills. If to solve your real-time problem, this blog doesn't work out sufficient, you may reach out to me in-person and I'll try my best to help you out. However, I am also planning to write one more blog with more complexed scenario but that may take a while. Do checkout my tech & programming blogs page whenever it is available for you. You may also subscribe to my FREE NEWSLETTER in which I share latest updates and ideas depending on your preferences.

Let's start.

We'll start with an example scenario where I should be able to manage the list of users and shall be able to perform the following actions:

  • View list of all Students
  • Add a New Student
  • Edit Student details
  • Delete any Student from the list
  • Add previous education details for each student
  • Edit previous education details for each student
  • View list of previous education details for each student
  // Component.ts file

import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
    selector: 'app-my-form-component',
    templateUrl: './my-form-component.html'
})
class MyFormComponent implements OnInit {

    form: FormGroup;

    constructor(private fb: FormBuilder) {}
    
    ngOnInit() {
        this.form = this.fb.group({
            students: this.fb.array([
                this.fb.group({
                    name: this.fb('', [Validators.required]),
                    dob: this.fb(''),
                    gender: this.fb('', [Validators.required]),
                    phoneNumber: this.fb('', [Validators.maxLength(10)]),
                    rollNumber: this.fb('', [Validators.required, Validators.maxLength(12)]),
                    address: this.fb(''),
                    educationHistory: this.fb.array([
                        this.fb.group({
                            degreeName: this.fb('', [Validators.required]),
                            totalMarks: this.fb(''),
                            passingYear: this.fb(''),
                            universityName: this.fb('')
                        })
                    ])
                })
            ])
        });
    }

}

 

This is a developing story.

Share this blog on:

Deepak Jain, Full-stack Developer, Blogger and Tech Consultant

About Author

Deepak Jain is an experienced professional full-stack developer, UI/UX designer, ex-startup entrepreneur, passionately writes blog on technology, startups, business ideas. He also shares his own life experiences and creates awesome inspiring stories from the lives of people. Check out full profile