Complex and Dynamic Form Design in Angular (Part 1 - Form Group)
Tags: angular, design, form
Published: 2019-06-29 12:15:12

---
title: Complex and Dynamic Form Design in Angular (Part 1 - Form Group)
published: true
description: Complex Form and Dynamic Design in Angular
tags: Angular, Design, Form
---

# Introduction

In Modern Web Application, a from could be very very very complicated. It would require a fancy layout, dynamic, validated, functional and also performance.

All make the Web Application Development difficult and cost so much resource. All the developed framework tried to make it easier but still very very very difficult.

Here, I would like to share some approaches to handle it in Angular.

* Form Group as Parameter (FormGroup Approach)
* Self Register Form (FormGroup Approach)
* Context Service (RxJs Approach)
* Angular Input Output Handling (Input Out Approach)
* Angular Two Way binding Approach (Input Out Approach)
* NgRx Store Approach (Redux Approach)

## Form Group as Parameter

![](https://thepracticaldev.s3.amazonaws.com/i/bbgbmjqx436tede8hrac.png)

## Self Register Form Group

The mother form is required to provide the addControl mechanism to the form when the child form is initialized and destroyed. For example, the ngFor and ngIf situation should be catered.

![](https://thepracticaldev.s3.amazonaws.com/i/g3asre7c8nk46ecg2trt.png)

Mother Form

```
abstract class MotherForm {
  form: FormGroup;
  constructor(){
    this.from = this.initializeForm();
  }

  initializeForm(): FormGroup {
    return new FormGroup({})
  }
  addControlGroup(name: string, formGroup: AbstractControl): void {
    this.form.addControl(name, formGroup);
  }
  removeControl(name: string){
    this.form.removeControl(name);
  }
}

```
Children Form

```
abstract class ChildrenForm implements OnInit, OnDestroy {
  @Input()
  intialValue: any
  form: FormGroup
  constructor(@Host private _motherForm: MotherForm){
    this.form = this.initializeForm();
  }
  initializeForm() : FormGroup{
    return new FormGroup({});
  }
  getFormName(): string {
    return 'emptyForm'
  }
  ngOnInit(){
    if (this.intialValue){
      this.form.setValue(this.initialValue)
    }
    this._motherForm.addControlGroup(this.getFormName(), this.form);
  }
  ngOnDestroy(){
    this._motherForm.removeControlGroup(this.getFormName());
  }
}
```

Now, The implementation class would leverage these abstract class for self registration.


app-self-register.component.ts

```
import { Component, OnInit } from '@angular/core';
import MotherForm from './mother-form';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'app-self-register',
  templateUrl: './self-register.component.html',
  styleUrls: ['./self-register.component.css']
})
export class SelfRegisterComponent extends MotherForm {
  constructor() {
   super();
  }
  initializeForm(){
    return new FormGroup({
      name: new FormControl('')
    })
  }
}
```
app-self-register.component.html


```
<form [formGroup]="form">
  <input formControlName="name"/>
  <app-self-register-children1></app-self-register-children1>
</form>
{{form.value | json}}

```

self-register-children1.component.ts

```
import { FormGroup, FormControl } from '@angular/forms';
import { Component, OnInit, Host } from '@angular/core';
import ChildrenForm from '../children-form';
import { SelfRegisterComponent } from '../self-register.component';
@Component({
  selector: 'app-self-register-children1',
  templateUrl: './self-register-children1.component.html',
  styleUrls: ['./self-register-children1.component.css']
})
export class SelfRegisterChildren1Component extends ChildrenForm  {
  constructor(@Host() _motherForm: SelfRegisterComponent) {
    super(_motherForm);
  }
  initializeForm(): FormGroup{
    return new FormGroup({
      name: new FormControl('')
    })
  }
  getFormName(): string {
    return "selfRegisterChildren1";
  }
}

```
self-register-children1.component.html

```
<form [formGroup]="form">
  <input formControlName="name"/>
</form>

```

Result
![](https://thepracticaldev.s3.amazonaws.com/i/c0pwcarw8p90wmcpi9um.png)


## Reference
* https://medium.com/self-learning/nested-custom-component-and-form-group-53806a2cd0f5