Browse Source

Document 'own form controls' application

Kevin C. Coram 1 year ago
Signed by: kevin GPG Key ID: 0342351B3D61AD35
1 changed files with 82 additions and 0 deletions
  1. +82

+ 82
- 0
apps/parent-form/ View File

@@ -1 +1,83 @@
# Components Creating Own Form Controls

When a component becomes sufficiently complex, or the developer wishes to be able to reuse parts of it elsewhere, the component can be refactored into sub-components. One approach to binding such sub-components to their containing parent component is to pass the parent component's `FormGroup` in as an `@Input` parameter. Additionally, the data that each child sub-component needs is passed into an `@Input`. The children create their own `FormControls` as needed, and add them to the parent `FormGroup` provided to them. This approach greatly simplifies the code and template of the parent component:

export class AppComponent implements OnInit, OnDestroy {
contact: Contact;
form: FormGroup;

private subscription: Subscription

constructor(private fb: FormBuilder, private service: ContactService) {
this.form ={});

public ngOnInit() {
this.subscription = this.service.loadContact().subscribe((data: Contact) => { = data;

<form [formGroup]="form">

The `nested-forms-name` component is responsible for creating the form controls binding to the Contact's name, and the `nested-forms-address-list` component is responsible for iterating over the Contact's addresses and binding to them using the `nested-forms-address` (singular) component. For example, the `nested-forms-name` would be implented as so:

selector: 'nested-forms-name',
templateUrl: './name.component.html',
styleUrls: ['./name.component.css']
export class NameComponent implements OnInit {

@Input() name: Name;
@Input() parent: FormGroup;

group: FormGroup;

constructor(private fb: FormBuilder) {

ngOnInit() { ={
firstName: new FormControl( ? : ''),
lastName: new FormControl( ? : ''),
middleName: new FormControl( ? : ''),
prefix: new FormControl( ? : ''),
suffix: new FormControl( ? : ''),

if (this.parent) {

Calling `this.parent.addControl(....)` is what ensures that the controls created in the child component are made part of the over-all form.

## Pros

- The parent component is easy to understand and maintain
- Each child component encapsulates its form controls and template
- The child components can easily be re-used in other "parent" components

## Cons

- The creation of the form controls is tightly coupled with the templates
- Since each child component encapsulates its form controls, the overall shape of the form data is not always clear