Dividing a form into multiple components with validation

Question

I want to create a single big form with angular 2. But I want to create this form with multiple components as the following example shows.

App component

<form novalidate #form1="ngForm" [formGroup]="myForm">
<div>
    <address></address>
</div>
<div>
    <input type="text" ngModel required/>
</div>

<input type="submit" [disabled]="!form1.form.valid" > </form>

Address component

<div>
<input type="text" ngModel required/> </div>

When I use the code above it was visible in the browser as i needed but the submit button was not disabled when I delete the text in address component.
But the button was disabled correctly when I delete the text in input box in app component.

Answer 1

Most upvoted comment is boilerplate: I have seen project with this approach and it's a disaster to manage.

I would like to thank user @elia for their answer.

To make it a bit more convenient I can only add, that we can place provider in constant:

import { Provider } from '@angular/core';
import { ControlContainer, FormGroupDirective } from '@angular/forms';

export const FormPart: Provider = {
  provide: ControlContainer,
  useExisting: FormGroupDirective,
};

and import it in desired component like:

@Component({
  ...
  viewProviders: [FormPart],
})

and also create directive with mentioned constructor code which provide parent form if needed, so we can separate form business logic into smaller chunk.

I have tried to explore how decorators function in Angular to extend @Component with such viewProvider, but it's more complex topic, seems like it's not possible, so I gave up. Will be glad to hear other's experience on this. I think it's a nice feature for Angular to support and make work with complex forms easier.

Answer 2

With the latest versions of Angular 2+ you can spit your form in multiple components without passing the formGroup instance to the child as input.

You can achieve this by importing this provider into your child component:

viewProviders: [{provide: ControlContainer,useExisting: FormGroupDirective}]

and then you can access to the main form by injecting the formGroupDirective as well:

constructor(private readonly formGroupDirective: FormGroupDirective)

Answer 3

There is a way to do that in template driven forms too. ngModel creates automatically a separate form on each component, but you can inject the form of the parent component by adding this to your component:

@Component({
viewProviders: [{ provide: ControlContainer, useExisting: NgForm}]
}) export class ChildComponent

You have to make sure though, that each input has a unique name. So if you use *ngFor to call your child component, you have to put the index (or any other unique identifier) into the name , e.g.:

[name]="'address_' + i"

If you want to structure your form into FormGroups, you use ngModelGroup and

viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }]

instead of ngForm and add [ngModelGroup]="yourNameHere" to some of your child components html containing tags.

Answer 4

I would use a reactive form which works quite nicely, and as to your comment:

Is there any other simple example for this one? Maybe the same example without loops

I can give you an example. All you need to do, is to nest a FormGroup and pass that on to the child.

Let's say your form looks like this, and you want to pass address formgroup to child:

ngOnInit() {
  this.myForm = this.fb.group({
    name: [''],
    address: this.fb.group({ // create nested formgroup to pass to child
      street: [''],
      zip: ['']
    })
  })
}

Then in your parent, just pass the nested formgroup:

<address [address]="myForm.get('address')"></address>

In your child, use @Input for the nested formgroup:

@Input() address: FormGroup;

And in your template use [formGroup]:

<div [formGroup]="address">
  <input formControlName="street">
  <input formControlName="zip">
</div>

If you do not want to create an actual nested formgroup, you don't need to do that, you can just then pass the parent form to the child, so if your form looks like:

this.myForm = this.fb.group({
  name: [''],
  street: [''],
  zip: ['']
})

you can pass whatever controls you want. Using the same example as above, we would only like to show street and zip, the child component stays the same, but the child tag in template would then look like:

<address [address]="myForm"></address>

Here's a

Demo of first option, here's the second Demo

More info here about nested model-driven forms.

Answer 5

I'd like to share approach that did the job in my case. I've created following directive:

import { Directive } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';

@Directive({
  selector: '[appUseParentForm]',
  providers: [
    {
      provide: ControlContainer,
      useFactory: function (form: NgForm) {
        return form;
      },
      deps: [NgForm]
    }
  ]
})
export class UseParentFormDirective {
}

Now, if you use this directive on child component, for example:

<address app-use-parent-form></address>

controls from AddressComponent will be added to form1. As a result form validity will also depend on state of controls inside child component.

Checked only with Angular 6

Answer 6

From my experience, this kind of form field composition is hard to make with template-driven forms. The fields embedded in your address component don't get registered in the form (NgForm.controls object), so they are not considered when validating the form.

• You can create a ControlValueAccessor component (that accepts ngModel attribute) with all validations, but then it's hard to display validation errors and propagate changes (address is considered as a single form field with a complex value).
• You could probably pass the form reference into the Address component and register your inner controls in it, but I haven't tried that and seems to be an odd approach (I haven't seen it anywhere).
• You can switch to reactive forms (instead of template driven), pass a form group object (representing an address) into the Address component, keeping the validation in your form definition. You can see an example here https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2