What is the most effective method for sharing a form across various components in Angular 5?

Question

What is the most effective method for sharing a form across various components in Angular 5?

I have a primary form within a service named "MainService" (the actual form is much lengthier). Here is an overview-

export class MainService {

 this.mainForm = this.formBuilder.group({
            A: ['', Validators.required],
            B: '',
            C: '',
            D: this.formBuilder.array([]),
            E: this.formBuilder.array([]),
            F:'',
            G: this.formBuilder.array([]),
            H: this.formBuilder.array([]),
            I: this.formBuilder.array([]),
        });
    }
}

Various components access the form's values and modify the form by importing the service. The template appears like this-

<mat-form-field>
    <input matInput [formControl]="MainService.A">
    <mat-label></mat-label>
</mat-form-field>

Is this the most effective approach for sharing the form among different components? Each component corresponds to a distinct form control in the complete form, hence they need to refer to the same form.

For example, imagine a student filling out various details about an article they read (book title, number of pages, authors, topics, etc.). Each detail of the book serves as a form control within the main form, with each individual component responsible for updating a specific form control (e.g. one component managing the name input, another dealing with author information).

Thank you!

javascript angular performance typescript angular-reactive-forms

Answer 1

Answer №1

One effective method, in my view, is to develop a compact component that includes the form you want to share, and engage with it using @Input and @Output properties.

For instance, utilize the @Input to configure the initial state of the form, while employing the @Output to respond to form events (especially when utilizing reactive forms).

<my-shared-form
  [initialState]="{ control1: 'nice'}"
  (formValuesChanged)="doSomeThingWithValidForm($event)"
></my-shared-form>

Form component:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-shared-form',
  templateUrl: './my-shared-form.component.html',
  styleUrls: ['./my-shared-form.component.scss'],
})
export class MySharedFormComponent implements OnInit {
  @Input()
  public initialState: { [key: string]: any };

  @Output()
  public formValuesChanged = new EventEmitter<{ [key: string]: any }>();

  public form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      control1: [this.initialState.control1 ? this.initialState.control1 : ''],
    });

    this.form.valueChanges.subscribe((val) => {
      this.formValuesChanged.emit(val);
    });
  }
}

Form component template:

<form [formGroup]="form">
  <input type="text" formControlName="control1">
</form>

Answer 2

One effective method, in my view, is to develop a compact component that includes the form you want to share, and engage with it using @Input and @Output properties.

For instance, utilize the @Input to configure the initial state of the form, while employing the @Output to respond to form events (especially when utilizing reactive forms).

<my-shared-form
  [initialState]="{ control1: 'nice'}"
  (formValuesChanged)="doSomeThingWithValidForm($event)"
></my-shared-form>

Form component:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-shared-form',
  templateUrl: './my-shared-form.component.html',
  styleUrls: ['./my-shared-form.component.scss'],
})
export class MySharedFormComponent implements OnInit {
  @Input()
  public initialState: { [key: string]: any };

  @Output()
  public formValuesChanged = new EventEmitter<{ [key: string]: any }>();

  public form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      control1: [this.initialState.control1 ? this.initialState.control1 : ''],
    });

    this.form.valueChanges.subscribe((val) => {
      this.formValuesChanged.emit(val);
    });
  }
}

Form component template:

<form [formGroup]="form">
  <input type="text" formControlName="control1">
</form>

What is the most effective method for sharing a form across various components in Angular 5?

Answer №1

Similar questions

What is the best way to transfer information to a different NextJS page?

Session management functions properly in Postman, however, encountering issues when attempting to use it on a web

The issue arises when trying to use destructured imports with Mongoose

Whenever I attempt to host my Node.js app using the GCP deploy command, it fails to work properly. The error message that appears states: "Module 'express' cannot be found."

Improving the efficiency of calculating sliding window averages

Tips for converting a string array constant into a union type

Angular 2 - Module 'ng-factory' not found

Guide on navigating through various HTML pages with distinct parameters using Node.js (Express server)

How can we incorporate methods using TypeScript?

Adjusting canvas height in Storybook - Component does not fit properly due to low canvas height

JavaScript is unable to identify one of the JSON values

Leveraging Emotion API in Video Content (JavaScript or Ruby)

What is the method to conceal a certain element in jQuery based on the value of another element?

Transform React.js data from MySql into a variable

I am facing difficulty in retrieving a unique dynamic div id using the useRef ReactJS hook, as it keeps returning the same id repeatedly

React Native ScrollView with a custom footer that adjusts its size based on the content inside (

What factors should be taken into account when allowing external websites to use scripts directly from your site?

Stop jQuery popups from wrapping text when resizing the browser window

Annoying jQuery animation error: struggling to animate smoothly and revert back. Callback function conundrum?!

What is the method for generating a popover in HTML when a user hovers over a button?