Can a form component be recycled through the use of inheritance?

Question

Can a form component be recycled through the use of inheritance?

Greetings to the Stackoverflow Community,

As I delve into this question, I realize that examples on this topic are scarce. Before diving into specifics, let me outline my strategy.

I currently have three pages with numerous FormGroups that overlap significantly. Their differences are minor, usually just one or two FormControls. While the easy solution would be to duplicate the entire component and add the required control, I find this approach impractical and disorderly. How can I tackle this issue effectively? Furthermore, I am seeking resources on inheritance in Angular as a whole. Despite browsing through official documentation and courses, such as the hero course, I have not come across relevant information on this subject.

angular forms typescript

Answer 1

Answer №1

It surprised me how simple it actually was, contrary to what I had assumed initially. I decided to create a FormBuilder class that would handle all the common controls used in different forms. By extending this FormBuilder class, any component can easily create a form like this.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Form } from '../form';

@Component({
  selector: 'app-invoices',
  templateUrl: './invoices.component.html',
  styleUrls: ['./invoices.component.scss']
})
export class InvoicesComponent extends FormBuilder {

  constructor() { 
    super()

    this.createForm();
  }
}

With just a simple line of code, I could add the necessary FormControls to my form:

this.queryForm.addControl('newControl', new FormControl(''))

This made it extremely easy to update the HTML code of the component with very minimal changes required.

Answer 2

It surprised me how simple it actually was, contrary to what I had assumed initially. I decided to create a FormBuilder class that would handle all the common controls used in different forms. By extending this FormBuilder class, any component can easily create a form like this.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Form } from '../form';

@Component({
  selector: 'app-invoices',
  templateUrl: './invoices.component.html',
  styleUrls: ['./invoices.component.scss']
})
export class InvoicesComponent extends FormBuilder {

  constructor() { 
    super()

    this.createForm();
  }
}

With just a simple line of code, I could add the necessary FormControls to my form:

this.queryForm.addControl('newControl', new FormControl(''))

This made it extremely easy to update the HTML code of the component with very minimal changes required.

Answer 3

Answer №2

If you want to achieve this, content projection is the way to go.

Consider a scenario where you have a FormGroup component containing two input fields. This component will also include ng-content allowing other components to insert their own HTML.

@Component({
    selector: 'my-form-group',
    template: `
        Type something : <input type="text"/> 
        Select something: <select> ... </select>
        Insert your own stuff: <ng-content></ng-content>
    `
})
export class FormGroupComponent {}

@Component({
    selector: 'my-form-group-radio',
    template: `
        <my-form-group>
             <input type="radio" name="myOption" value="1" />
             <input type="radio" name="myOption" value="2" />
        </my-form-group>
    `
})
export class FromGroupRadioComponent {}

This approach allows for the reusability of FormGroupComponent multiple times. Different components can be created and project different content as needed.

Answer 4

If you want to achieve this, content projection is the way to go.

Consider a scenario where you have a FormGroup component containing two input fields. This component will also include ng-content allowing other components to insert their own HTML.

@Component({
    selector: 'my-form-group',
    template: `
        Type something : <input type="text"/> 
        Select something: <select> ... </select>
        Insert your own stuff: <ng-content></ng-content>
    `
})
export class FormGroupComponent {}

@Component({
    selector: 'my-form-group-radio',
    template: `
        <my-form-group>
             <input type="radio" name="myOption" value="1" />
             <input type="radio" name="myOption" value="2" />
        </my-form-group>
    `
})
export class FromGroupRadioComponent {}

This approach allows for the reusability of FormGroupComponent multiple times. Different components can be created and project different content as needed.

Can a form component be recycled through the use of inheritance?

Answer №1

Answer №2

Similar questions

Angular 5 APP_INITIALIZER: Provider parse error - Cyclic dependency instantiation not possible

Why should TypeScript interfaces be utilized in Angular services for defining type information?

Issues with Angular updating the *ngFor Loop

Is the slow loading time of the Dev browser due to the large size of the vendor.js file

How can I determine if an Angular library is compatible with the specific version of Angular that my application is utilizing?

A guide on updating a MySQL table using a JSON object in Node.js

Changing the Month Label Format from Short (MMM) to Long (MMMM) in Angular Material Datepicker

Generating a d.ts file for images in Typescript using automation techniques

Having trouble getting the reset select function to work

Trouble accessing JSON object keys in Angular2 (rc.6)

The type 'TaskListProps[]' cannot be assigned to type 'TaskListProps'

The improved approach to implementing guards in Angular

Tips for managing transitions when the indicator is clicked by the user

What is the best way to approach writing a shared value that is utilized across multiple files in Angular?

Increment counter when a key is pressed in Angular 4 and decrement when the backspace key is pressed

Leveraging jQuery within Angular 6

Tips for effectively typing a collection of React wrappers in TypeScript

Utilizing a variable to pass props to a component (instead of a static component) within React Router 5

Is there a way to switch an element across various pages within Ionic 3?

Refreshing rows in ngx-datatable