How to add meta data for formControl?

Issue

I have array of forms FormGroup;

let forms = [this.form1, this.form2];

Each form has several controls: FormControl.

How to add additional data to FormControl for example type of element (input, textarea, select)?

For example I have form:

export class ProfileEditorComponent {
  profileForm = this.fb.group({
    firstName: [''],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
  });

How can I know that under zip field should be input or select?

How to iterate profileForm in template with nested form?

Solution

Answered before the edit of the question

UPDATE

The following is called module augmentation as described here or in the official documentation

This allows for augmenting (e.g. adding methods pr properties) classes from third party modules

ORIGINAL

We had the requirement to have a warning validators which is not provided by angular. What we did was the following in our typings.d.ts file which has to reside in our applications root directory.

import { AbstractControl } from '@angular/forms';

declare module '@angular/forms' {

  export interface AbstractControl {
    warnings: ValidationErrors | null;
  }
}

AbstractControl.prototype.warnings = ''; //add a default value instead of ''

ValidationErrors is a custom class of ours.

You could do something like

declare module '@angular/forms' {

  export interface AbstractControl {
    elementType: string; // input, textarea, select
  }
}

With that you all your AbstractControls in your application would have the property elementType available.

You could also use FormControl instead of AbstractControl

Answered By - Arikael