Enable partial form components using reactive form directives

[onlyann]

I'm submitting a ... (check one with "x")

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

A component can only use form reactive directives such as formControlName or formGroupName when its template contains the formGroup directive.
Otherwise, the directives will fail to resolve ControlContainer.
This happens because the directives specify the @Host metadata on ControlContainer.

The only workaround I could find is to inject the ancestor's ControlContainer in the child component and associate it to a formGroup directive in the child template.
This only partially solves the issue because this new formGroup directive doesn't expose any of the form events such as ngSubmit.

Desired behavior

The scope of ControlContainer resolution should be extended to ancestors.

What is the motivation / use case for changing the behavior?

This would enable the following use cases:

• Splitting a large form in sub components.
• Defining a sub form component that gets repeated in a parent form component ( a good example would be an address component used for both postal and business addresses by the parent).

Please tell us about your environment:

• Angular version: 2.0.0-rc.4
• Browser: [all ]
• Language: [all]

[aakhan1]

I have the exact same issue and was able to solve in the same way. Need better support for partial forms.

[pmowrer]

Another solution is for a "form partial" component to "forward" the ControlContainer dependency, providing the ControlContainer to its child directives.

E.g.:

const CONTROL_CONTAINER_PROVIDER = new Provider(ControlContainer, {
  useFactory: container => container,
  deps: [FormGroupDirective],
});

@Component({
  viewProviders: [CONTROL_CONTAINER_PROVIDER],

[kara]

@onlyann This looks like a dupe of #9281. The short answer is that the child component needs to implement ControlValueAccessor. See my comment here for a more detailed explanation.

[onlyann]

@kara I am not convinced that implementing ControlValueAccessor is a solution for an example I gave above: what if I want a reusable Address component?
It wouldn't be a single value from the FormGroup perspective but another FormGroup comprised of several inputs with each input being a distinct FormControl with validation rules.
How would you achieve this with a ControlValueAccessor?

[kara]

It's certainly possible to use a FormGroup instead of FormControl.

Here's a quick example: http://plnkr.co/edit/Mm3iJOZZGMQ2OmVitpuc?p=preview

[onlyann]

Thanks for the Plunker @kara.
From what I read, the address FormGroup is transparent to the form FormGroup. How does street validation error flow to the parent ?

We are using ControlValueAccessor in our app where it corresponds to a discrete control and it is fine (datepicker, toggle..).
When this is a subform, it doesn't work quite as well.
My case of extending ControlContainer scope would simply allow to have this address component add itself dynamically as a FormGroup from the injected root FormGroup.

[kara]

Adding validation has a similar process to value accessors. You implement the validator interface (just a validate() function) and provide it as an NG_VALIDATOR on your custom form control. Here's an example: http://plnkr.co/edit/Mm3iJOZZGMQ2OmVitpuc?p=preview.

Regarding extending ControlContainer scope, we have had many internal conversations about this. At the end of the day, we don't want to make the boundaries quite that lenient. Explicitly passing the ControlContainer down or implementing ControlValueAccessor is opt-in. Otherwise, you might get components that are registering themselves with random, unrelated parent forms (think maybe a third-party component that has an internal checkbox or something). We do want to add some syntactic sugar to make this process easier, so stay tuned.

[onlyann]

All right. Thanks for your help.

[linusbrolin]

@kara What if each Address is inside a formArray, and don't have any formControlName (shipping, billing, etc)?
My component can have an endless supply of addresses, so I can't name each one of them, as it's just an array of objects.

What do I use instead of formControlName in the template to connect each address to the parent form?
Specifically, it's this line I'm wondering about:

<address formControlName="billing" header="Billing"></address>

[kara]

You'll just want to set the formControlName to the current index. See here: http://plnkr.co/edit/a9h1jjSaWrNm36cTUvIY?p=preview

[pmowrer]

Great examples @kara, very helpful!

What about a scenario where <address> requires validation in one case, but not in another? This is where the flexibility of defining the entire FormGroup structure at the parent level shines. I suppose you could write an address validator that validates the address FormControl and internally composes individual field validators like Validator.required.