Initiating a reactive form within a service and then injecting it into a component

Question

Initiating a reactive form within a service and then injecting it into a component

How can I set up a reactive form in a service and then inject it into each component?

I have two components and a service. Both components share the same form as it is simply for typing in one component and displaying in the other.

  
// ---- Service Setup ----

public form: FormGroup;

constructor(
    private formBuilder: RxFormBuilder
) 

createform(sfm) {
    this.form = this.formBuilder.formGroup(sfm);
}

// ---- Input and Output Components Setup ----

constructor(
    private service: Service
) { }

ngOnInit() {

    const sfm = new InputForm();
    this.service.createform(sfm);

}

This results in an error stating that the form has not been initialized.

angular typescript service components

Answer 1

Answer №1

When working with a form that will be used by the Component, it is best to have the Service return the generated form to the Component.

The service should generate the form based on certain data, allowing the form to be pre-filled with that data.

To achieve this, simply return the form from the service method:

constructor(
  private formBuilder: FormBuilder
)

createForm(sfm) {
  return this.formBuilder.formGroup({
    /*Generate form based on sfm here*/
  });
}

Now in your Component, you can call the createForm method and expect to receive a FormGroup:

userForm: FormGroup;

constructor(
  private service: Service
) {}

ngOnInit() {
  const initialData = {
    name: 'John'
  };
  this.userForm = this.service.createForm(initialData);
}

You can then use this form in the template as usual:

<form [formGroup]="userForm">
  ...
</form>

For more insights into this approach, check out this article on AngularInDepth.

Answer 2

When working with a form that will be used by the Component, it is best to have the Service return the generated form to the Component.

The service should generate the form based on certain data, allowing the form to be pre-filled with that data.

To achieve this, simply return the form from the service method:

constructor(
  private formBuilder: FormBuilder
)

createForm(sfm) {
  return this.formBuilder.formGroup({
    /*Generate form based on sfm here*/
  });
}

Now in your Component, you can call the createForm method and expect to receive a FormGroup:

userForm: FormGroup;

constructor(
  private service: Service
) {}

ngOnInit() {
  const initialData = {
    name: 'John'
  };
  this.userForm = this.service.createForm(initialData);
}

You can then use this form in the template as usual:

<form [formGroup]="userForm">
  ...
</form>

For more insights into this approach, check out this article on AngularInDepth.

Initiating a reactive form within a service and then injecting it into a component

Answer №1

Similar questions

Troubleshooting Angular4 and TypeScript Compile Error TS2453: A Comprehensive

Securing Your Angular 2 / ASP.NET MVC Application from CSRF Attacks

Using Typescript to extract elements from one array and create a new array

PrimeNg element for showcasing incorrect user input similar to mat-error

Encountering an issue while attempting to load in Angular2 RC4: Error: XHR error (404 Not Found) during loading

When using TypeScript, the tls.TLSSocket() function may trigger an error mentioning the absence of a "socket" parameter

Could someone provide some insights on how the ( !! ) operator functions?

Sinon made it difficult to successfully stub/mock a method return

tinyMCE5 has a quirky habit of inserting p tags without warning, but only when using

Sending Angular forms to various endpoints

Setting Up Absolute Imports in Node.js using TypeScript

Why is Angularfire2 failing to save the data it fetches?

How can I incorporate Scroll effects using Angular 8 and rxjs 6?

How can a new component be added as a child of an element without replacing or interfering with other

Response type tailored to specific input type

Utilize string values as identifiers in type declarations

Checking if a useState setter passed in props is triggered in a Jest test

Concealing Table Rows in Angular Material - How can I make table rows visible only after they are searched

What is the reason behind Angular not allowing users to define @Output events that begin with 'on'?

The 'subscribe' attribute is not a part of the 'OperatorFunction<{},{>}' structure