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

Radio button option IDs are not unique #607

Closed
SpiraMira opened this issue Dec 21, 2017 · 0 comments · Fixed by #608
Closed

Radio button option IDs are not unique #607

SpiraMira opened this issue Dec 21, 2017 · 0 comments · Fixed by #608
Labels

Comments

@SpiraMira
Copy link

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

Current behavior

  • A simple Radio button generates options with non-unique ids (per below in Chrome developer console)

[DOM] Found 2 elements with non-unique id #formly_2_radio_title_0: (More info: https://goo.gl/9p2vKq) <input class=​"custom-control-input ng-untouched ng-pristine ng-valid" type=​"radio" ng-reflect-name=​"formly_2_radio_title_0" ng-reflect-value=​"mr" ng-reflect-form=​"[object Object]​" id=​"formly_2_radio_title_0" aria-describedby=​"formly_2_radio_title_0-message" ng-reflect-field=​"[object Object]​" ng-reflect-form-control=​"[object Object]​">​ <input class=​"custom-control-input ng-untouched ng-pristine ng-valid" type=​"radio" ng-reflect-name=​"formly_2_radio_title_0" ng-reflect-value=​"mrs" ng-reflect-form=​"[object Object]​" id=​"formly_2_radio_title_0" aria-describedby=​"formly_2_radio_title_0-message" ng-reflect-field=​"[object Object]​" ng-reflect-form-control=​"[object Object]​">​

Here is an excerpt of the field config:

``
fields: FormlyFieldConfig[] = [
{
fieldGroupClassName: 'row',
className: 'col-12',
fieldGroup: [{
className: 'col-12',
type: 'radio',
key: 'title',
// formControl: new FormControl('mrs'),
templateOptions: {
options: [{
key: 'mr',
value: 'Mr.',
}, {
key: 'mrs',
value: 'Mrs',
}],
label: 'Title',
description: 'Select a title that suits your description',
}
}, {

``
Expected behavior

For the component to generate a unique Id per radio button option.

Minimal reproduction of the problem with instructions

adda radio button
What is the motivation / use case for changing the behavior?

bug
Please tell us about your environment:

macOS Sierra
Visual Studio Code
Angular 5+
node v9.2.1
npm v5.5.1

  • Angular version: 2.0.X

yes

  • Browser: [all | Chrome 63 | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome 63

  • Language: [all | TypeScript 2.6.2 | ES6/7 | ES5]
  • Node (for AoT issues): node --version = 9.2.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

Successfully merging a pull request may close this issue.

2 participants