md-radio buttons in reactive forms (model based) cause several problems

[mLaird]

Bug, feature request, or proposal:

It is a bug, as best I can tell. I cannot tell whether the problem is in Angular or MD, code or docs.

What is the expected behavior?

md-radio buttons should not affect other DOM components, and they should work.

What is the current behavior?

1.When radio buttons are constructed in a reactive form with current Angular 2 docs, http://devdocs.io/angular~2_typescript/api/forms/index/radiocontrolvalueaccessor-directive , all the md-input elements disappear from the form page. When formControlName="something" is removed from md-radio-button elements, the md-input boxes re-appear. 2. Also when formControlName is present, the md-radio buttons do not switch from one to another. Each click adds another clicked circle to the group. When removed, only one click registers in each group, i.e., switch occurs. 3. Lastly, my radio button dots are not inside the circles, but I imagine that bug has already been reported.

What are the steps to reproduce?

I posted relevant code, and console errors at:
http://stackoverflow.com/questions/40597983/angular-2-md-radio-buttons-in-reactive-model-based-forms-dont-work-stop-md
I have tried a lot of things, and conclude the problem is a bug.

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

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

Make radio buttons behave as expected

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.1.2, MD-alpha.10, Chrome, FF

Is there anything else we should know?

[csabattilas]

What's the reason you are using the FormControlName on the md-radio-button and not on the md-radio-group? May I see the whole code you have, with the md-inputs as well? I think you should use the FormControlName on the group rather then on the individual elements, at least for me it's working. thanks

[mLaird]

Csaba, Thanks. I am following the instructions in Angular2's documentation
for the RadioControlValueAssessor in reactive forms. Check the link I
included. Here's the code example:

<form [formGroup]="form">
  <input type="radio" formControlName="food" value="beef" > Beef
  <input type="radio" formControlName="food" value="lamb"> Lamb
  <input type="radio" formControlName="food" value="fish"> Fish
</form>

My md-inputs all follow this format from Angular2's reactive form
documentation:

<md-input id="country" name="country" class="required"

aria-labelledby="country" formControlName="country"
i18n-placeholder="select country placeholder" placeholder="Country"
type="text" size="30" maxlength="30">

Documentation is in Angular devdocs Cookbook for Dynamic Forms and in
http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

On Wed, Nov 16, 2016 at 2:49 AM, Csaba Szabo [email protected]
wrote:

What's the reason you are using the FormControlName on the md-radio-buttonand
not on themd-radio-group? May I see the whole code you have with themd-input`s?
I think you should use the FormControlName on the group rather then on the
individual elements, at least for me it's working. thanks

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#1875 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADDSbxHItcrPQgTaKMWpi6VpCFt06DcHks5q-rVwgaJpZM4Ky-Dm
.

Mike Laird

12 Arbor Creek Drive, Pittsford, New York 14534
[email protected]

". . . remembering on both sides that civility is not a sign of weakness,
and sincerity is always subject to proof. Let us never negotiate out of
fear, but let us never fear to negotiate." - John F. Kennedy

[mLaird]

I removed formControlName from each md-radio-button, and put it once in the md-radio-group. This is not what the docs say for RadioControlValueAssessor, but it fixed problems 1. and 2. above. Problem 3, radio dots are not inside the circle remains. My question is whether this is a "lucky bandaide" fix that will cause some other problem in the future, or is Angular documentation wrong in several places? Also, why are the radio button dots off to the right of the circles?

[mLaird]

At long last, I found that Problem 3, radio dots are not inside the circle, is caused when a theme is not imported into the CSS. When I added this statement to the page's CSS, the radio buttons look and work fine.

@import '/node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css';

You may have to change it slightly depending upon your path to the prebuilt folder. It seems indigo-pink is the only theme that works, as of 12/22/16. All the others in the prebuilt folder break the page.

The formControlName problems, #1 and #2, continue, as best I can tell in alpha.11-3

[kinggolf]

Thanks @mLaird, I just started with angular-md2 and ran into this same exact issue. Your solution seems to worked but at the same time seems like the most amazingly clugie-hack of all time. If someone could point out an explanation for this, then I would be most appreciative. There must be one since @jelbourn closed this. Thank you.

[kinggolf]

@mLaird @jelbourn - No offense meant to my previous "amazingly clugie-hack of all time" comment above. I am totally under-the-gun to get a new project released this weekend and like I said wanted to try out angular-md2 for 1st time - trying to expand my horizons... Anyway, I appreciate everyone's time and effort in publishing and supporting open source. Thanks again and cheers.

[molayodecker]

@mLaird Thanks buddy this help me too. Been trying to figure out why I am running into errors for two freaking hours. Angular should fix this. It's freaking annoying

[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.}