Support for composite forms

[scottshidlovsky]

feature request: Support for composite forms

What is the expected behavior?

Allow building of composite forms using material components.

What is the current behavior?

The controls won't pick up the correct parent form when in a composite form so their errors won't be shown according to the error state matcher. There are also no hooks for listening for blur on controls like select so we can propagate the touch event.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-3vwszx In the above stackbliz, is an example using just 2 inputs for first name, last name. In my use case there would be more than just 2 inputs but it demonstrates the issue. On the composite form when submit is clicked, the error messages are not shown. On the inline form when submit is clicked, the error messages correctly display.

What is the use-case or motivation for changing an existing behavior?

Being able to group many different controls under one composite control so it can be easily reused inside of a reactive or template driven form.

Is there anything else we should know?

Using the principles explained in the angular connect talk here https://www.youtube.com/watch?v=CD_t3m2WMM8&feature=youtu.be&t=1645

[WizardPC]

First i try to help, but now i'm lost... and i have questions @scottshidlovsky !

1. Your mat-error has no condition *ngIf but it's working good on min length, how ?
2. Your formGroup with formControl has no Validators.minLength() or Validators.required() but formOne respect both of conditions. How ? It's not coded like that in the documentation, so i don't understand how it works :octopus:

[benneq]

mat-error is automatically hidden, if there's no error and automatically displayed if there's at least 1 error.

required is a bit counterintuitive when using Angular Material + Reactive Forms. If you set Validators.required the asterisk won't get appended to the label and placeholder. For this to work, you must add required to the input. Of course you can simply set both.

And the Reactive Form will just use the required attribute. Seems like it doesn't care if you use Validators.required or required attribute. Both seem to work fine.

I've just forked @scottshidlovsky's example and added Validators.required and some *ngIf. firstName: ngIf hasError('required') lastName: ngIf touched && hasError('required')

https://stackblitz.com/edit/angular-material2-issue-9udy8e?file=app%2Fname-field.component.html

As you can see the HAS ERROR output for firstName is always shown, but for lastName it won't show until you manually touched the input.

Conclusion: I guess that something doesn't get propagated when clicking the submit button. The mat-input-invalid and mat-form-field-invalid CSS classes won't get added to the input elements on submit.

[WizardPC]

Thanks @benneq ! I can clean my code knowing this...

[dagerber]

This might not be a material issue, but a general Angular problem. However, mat-error should take a boolean 'formSubmitted'. That form submitted state could come from an Input, that was passed to the nested component. See stackblitz for a working example not using material

[michael-letcher]

@dagerber I've run into this issue with creating a dynamic form based loosely off the guide from Angular and have found that the inputs are not updating to their error state unless touched.

Does your approach work for dynamic form designs too?

[sadplace]

I am also interested in this. Any news or some other way to do it?

[jsonod]

I'm also troubled by this. Currently this is blocking me from creating nested forms. Does anyone have any workaround for submit propagation?

[Standaa]

@jsonod You can still create nested forms, but Validation will be done in the parent component using a FormBuilder. This question on S.O shows how I did it. Hope it helps.

[maxime1992]

Currently this is blocking me from creating nested forms

@jsonod I'm 3.5 years late to the party but if you use ControlValueAccessor everything should work just fine. Because it tends to be quite verbose we've developed ngx-sub-form at work and open sourced it if it's of any use.