Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular2- RC6 Custom Form Controls not working #11479

Closed
ahmadqarshi opened this Issue Sep 9, 2016 · 3 comments

Comments

Projects
None yet
4 participants
@ahmadqarshi
Copy link

commented Sep 9, 2016

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

[x] bug report => search github for a similar issue or PR before submitting
[ ] 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

After updating the Angular2 application from RC5 to RC6, custom form controls stopped working. The value entered in the custom form control is not reflected in the associated model.

Expected behavior

The associated model should reflect the value entered/selected in the custom control.

Reproduction of the problem
I have used the plunker created by Thoughtram for Custom Forms Control. You can find the plunker at https://plnkr.co/edit/bLXWXn

This plunker is using RC5. To reproduce the issue please update the version information in the systemjs.config.js is to

var ngVer = '@2.0.0-rc.6';
var routerVer = '@3.0.0-rc.2';
var formsVer = '@2.0.0-rc.6';

You will see that the selected value in the control is not reflected.

A question is already posted on StackOverflow http://stackoverflow.com/questions/39408419/angular2-rc6-custom-form-controls-not-working

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

Please tell us about your environment:

  • Angular version: 2.0.0-rc.6
  • Browser: [ Chrome 52.0.2743.116 m]
  • Language: [TypeScript 1.8 | ES6]
@VirrageS

This comment has been minimized.

Copy link

commented Sep 9, 2016

I have noticed that registerOnChange is being fired twice in RC.6 wheras in RC.5 only once. This is connected with new code added in RC.6 starting from:

// re-run validation when validator binding changes, e.g. minlength=3 -> minlength=4

Firstly, you assign proper function to propagateChange (same as RC.5) but then new code is firing registerOnChange again with another function which you assign again and then you are using wrong function as propagateChange.

Here is simple workaround (only for presentation purposes): https://plnkr.co/edit/MoSFkJPFdWP0fFyLyoZO?p=preview
But I believe that there is something wrong with new code.

@pkozlowski-opensource

This comment has been minimized.

Copy link
Member

commented Sep 9, 2016

This is a side effect of d2ad871. After this change both Validator and ControlValueAccessor have the same method in their interfaces (registerOnChange). Since the CounterInputComponent implements both Validator and ControlValueAccessor the registerOnChange method is called twice and the internal state gets messed up.

IMO the situation where we want to implement Validator and ControlValueAccessor on the same class is not that uncommon so it might be a good idea to rename one of the methods (registerValidatorChange ?). Unfortunately this would be a BC at this point....

A proper work-around for this case is to implement Validator and ControlValueAccessor on separate classes.

@kara kara added the type: bug/fix label Sep 9, 2016

@kara kara self-assigned this Sep 9, 2016

@kara

This comment has been minimized.

Copy link
Contributor

commented Sep 9, 2016

Yeah, the naming of the two methods should be distinct because that's a common use case. On it.

kara added a commit to kara/angular that referenced this issue Sep 9, 2016

@evmar evmar closed this in #11492 Sep 9, 2016

evmar added a commit that referenced this issue Sep 9, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.