two-way data binded FormControl does not update form valid status

[emreavsar]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When having form controls in child components, and they are passed to the child component as @Input() and changes get retrieved with @Output() (two way data binding) the form.valid status gets not updated.

Expected behavior

The form.valid status should get updated.

Minimal reproduction of the problem with instructions

• Open plunkr: http://embed.plnkr.co/NTZCoV5dUC9yO9h7cyNy/
• Fill out firstname
• Fill out lastname
• Fill out day
• see validation status not updated

when you change the firstname again, the form gets re-validated. I think it's because of the @Output() but this should work as well in my opinion.

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

• it is a bug?

Environment

Angular version: 4.3.2

Browser:
- [x] Chrome (desktop) version latest
- [x] Firefox version latest
- [x] Safari (desktop) version lastest

[Toxicable]

Fixed it for ya
https://plnkr.co/edit/Q501VstsfDEW1n0gC7xX?p=info
Forgot to save, use the one below

[emreavsar]

@Toxicable Still reproducible.. What was your change?

[Toxicable]

You were using the Forms incorrectly
I removed your nested form and removed the @output

[tytskyi]

fixed: https://plnkr.co/edit/aahDvprAe7y6Fh7koeu2?p=preview

@Toxicable you probably forgot to save plunker?

@emreavsar why do you want to create intermediate form group? Date control worked directly with it, instead of most parent.

[Toxicable]

@tytskyi whops, yeah I did, mine is the same as yours though so we'll go with that

[emreavsar]

Ok but now you removed the formcontrol from the date.component and put it into the parent component. This breaks somehow the self-contained functionality.

One can imagine that the date.component has its own validation rules and should be a drop-in usable component. with the provided plunkr of @tytskyi this 'self-containment' gets lost.

That was the main idea of using the @Output().

[tytskyi]

@emreavsar what exactly you are trying to achieve? Do you want your <date> component to act like a custom control?

Ok but now you removed the formcontrol from the date.component and put it into the parent component. This breaks somehow the self-contained functionality.

note that i did not "put" it to the parent component, it was already there.

[emreavsar]

@tytskyi i want to have a <date> component which can be just used, where I get the day value out of it. imagine there is a custom DayValidator which checks the date to match some given conditions. Each time i want to use the <date> component now, I have to keep in my that there is somewhere a DayValidator to attach as well.

the main idea of the @Input() was to make the day control inside the component overridable if needed.

sorry that was my mistake, it was already there as you said.

So are my expectations just wrong? is @Output() not compatible with form validation at all?

[tytskyi]

@emreavsar

So are my expectations just wrong? is @output() not compatible with form validation at all?

Modifying form.controls.property directly will not take effect. There is a special method for this. Which also does some "cleanup" logic to release old control.

There is the working plunker made from your original one: https://plnkr.co/edit/mtYdLglU2Q1UuOM87RKf?p=preview (fixed link)

But i think what you are really looking for - is to implement <date> component as custom control. So that is does not include form control inside, but it will actually act, like form control.
So then it is possible to use <date formControlName="date"> or <date [(ngModel)]="model.date"> directly with reactive/template driven forms.

[emreavsar]

@tytskyi thanks but I think this is just not leading to the right solution as mentioned by you.

So final question would be What to use (since this is not supported by angular forms) for:

• ready to use component holding some inputs (day, month, year in case of date) with validation
• use this form group inside your own form in a parent component
  - make the parents form validation respecting the child's form validation's result
• this date component can be used in different components, that's why it should be a component by it self

I just want to use this date component like I'm using other form controls like the md-datepicker (which has similar requirements as described above). What about custom form groups?

note: the initial idea of this ticket was to report a bug, which slightly turned into a CR or rather support issue. thanks anyway 👍

[tytskyi]

@emreavsar i considered your questions, but unfortunately i cannot answer, since i am not an advanced user of reactive forms, but i always prefer template driven forms until it's easier to use reactive. I find reactive forms too complicated for me.

Also i never had such requirements as you. But if i would - i would implement component that implements ControlValueAccessor with several fields inside. Then its "model" shape would be well defined. Plus it would have dedicated validators, since as i said i would have well defined model (which is not flat, but rather json-like) - the validator would validate that "json" as is.

But i don't think if it's good or bad solution.

I think you better search in the internet something like "angular nested form group" etc. Also i suggest you to ask in https://gitter.im/angular/angular.

[kara]

@emreavsar If you want your custom form control to integrate with Angular forms, it has to implement ControlValueAccessor (as others have mentioned). If you want that integration to include validation, implement the Validator interface as well and provide your custom control as an NG_VALIDATOR. You can see an example of this in md-datepicker here: https://github.com/angular/material2/blob/master/src/lib/datepicker/datepicker-input.ts#L49.

I'm closing this as a question, but worth noting that our Gitter community is pretty awesome if you have further questions about this. We should be updating form docs soon to add more information about CVAs, so hopefully that will help as well.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}