Angular | Reactive form: Unable to get values from radio button
0
I am not able to get value from radio buttons in reactive form. It always come empty string. How could I solve that? Below is the code for that:
<form (ngSubmit)="onSubmit(segment_abc)" [formGroup]="segment_abc">
<div class="container">
<div class="row product-chooser">
<div class="col-md-4 col-sm-6 selected product-chooser-item" id="div1" tabindex="-1">
<div class="pricingTable">
<i class="fa fa-rupee"> 400</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=1>
<!-- <a href="#" class="pricingTable-signup">Subscribe Now</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div2" tabindex="-1">
<div class="pricingTable">
<div class="bottom">
<div class="txt_400">
<i class="fa fa-rupee"> 1000</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=2>
<!-- <a href="#" class="pricingTable-signup">Subscribe Now</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div3" tabindex="-1">
<div class="pricingTable pricingTablepremium">
<input type="radio" formControlName="segment123" [value]=3 (click)="openValue()">
<!-- <a href="#" class="pricingTable-signup">Subscribe Now</a> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <button type="submit" class="btn btn_form" (click)="open(content,'email')">Submit</button> -->
<button type="submit" class="btn btn_form" >Submit</button>
</div>
There is no output in when I am getting values in form control
angular6 selection angular-reactive-forms
asked Nov 15 '18 at 6:46
kunalkunal
36
add a comment |
0
I am not able to get value from radio buttons in reactive form. It always come empty string. How could I solve that? Below is the code for that:
<form (ngSubmit)="onSubmit(segment_abc)" [formGroup]="segment_abc">
<div class="container">
<div class="row product-chooser">
<div class="col-md-4 col-sm-6 selected product-chooser-item" id="div1" tabindex="-1">
<div class="pricingTable">
<i class="fa fa-rupee"> 400</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=1>
<!-- <a href="#" class="pricingTable-signup">Subscribe Now</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div2" tabindex="-1">
<div class="pricingTable">
<div class="bottom">
<div class="txt_400">
<i class="fa fa-rupee"> 1000</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=2>
<!-- <a href="#" class="pricingTable-signup">Subscribe Now</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div3" tabindex="-1">
<div class="pricingTable pricingTablepremium">
<input type="radio" formControlName="segment123" [value]=3 (click)="openValue()">
<!-- <a href="#" class="pricingTable-signup">Subscribe Now</a> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <button type="submit" class="btn btn_form" (click)="open(content,'email')">Submit</button> -->
<button type="submit" class="btn btn_form" >Submit</button>
</div>
There is no output in when I am getting values in form control
angular6 selection angular-reactive-forms
asked Nov 15 '18 at 6:46
kunalkunal
36
First of all, I do not see any Reactive form used in the stackblitz shared by you. Secondly, your section list contains checkboxes, that means one can select multiple, you should make them radio buttons to have only one selected or you can define a checkbox group having checkboxes with same name attribute ( this will help in getting only one selected). Let me know if this is what you wanted
– nircraft
Nov 19 '18 at 1:47
@nkuma_12 That's radio buttons, I have updated issue and code as well. You can check now.
– kunal
Dec 5 '18 at 7:38
take a look here for details: stackoverflow.com/a/46720577/9386929
– nircraft
Dec 5 '18 at 12:59
I have already gone through same code and that is not working for me that's why I put this question.
– kunal
Dec 6 '18 at 4:33
can you put up a stackblitz link with your component and mocked accounts data?
– nircraft
Dec 6 '18 at 13:54
add a comment |
0
0
0
I am not able to get value from radio buttons in reactive form. It always come empty string. How could I solve that? Below is the code for that:
<form (ngSubmit)="onSubmit(segment_abc)" [formGroup]="segment_abc">
<div class="container">
<div class="row product-chooser">
<div class="col-md-4 col-sm-6 selected product-chooser-item" id="div1" tabindex="-1">
<div class="pricingTable">
<i class="fa fa-rupee"> 400</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=1>
<!-- <a href="#" class="pricingTable-signup">Subscribe Now</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div2" tabindex="-1">
<div class="pricingTable">
<div class="bottom">
<div class="txt_400">
<i class="fa fa-rupee"> 1000</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=2>
<!-- <a href="#" class="pricingTable-signup">Subscribe Now</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div3" tabindex="-1">
<div class="pricingTable pricingTablepremium">
<input type="radio" formControlName="segment123" [value]=3 (click)="openValue()">
<!-- <a href="#" class="pricingTable-signup">Subscribe Now</a> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <button type="submit" class="btn btn_form" (click)="open(content,'email')">Submit</button> -->
<button type="submit" class="btn btn_form" >Submit</button>
</div>
There is no output in when I am getting values in form control
angular6 selection angular-reactive-forms
asked Nov 15 '18 at 6:46
kunalkunal
36
I am not able to get value from radio buttons in reactive form. It always come empty string. How could I solve that? Below is the code for that:
<form (ngSubmit)="onSubmit(segment_abc)" [formGroup]="segment_abc">
<div class="container">
<div class="row product-chooser">
<div class="col-md-4 col-sm-6 selected product-chooser-item" id="div1" tabindex="-1">
<div class="pricingTable">
<i class="fa fa-rupee"> 400</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=1>
<!-- <a href="#" class="pricingTable-signup">Subscribe Now</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div2" tabindex="-1">
<div class="pricingTable">
<div class="bottom">
<div class="txt_400">
<i class="fa fa-rupee"> 1000</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=2>
<!-- <a href="#" class="pricingTable-signup">Subscribe Now</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div3" tabindex="-1">
<div class="pricingTable pricingTablepremium">
<input type="radio" formControlName="segment123" [value]=3 (click)="openValue()">
<!-- <a href="#" class="pricingTable-signup">Subscribe Now</a> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <button type="submit" class="btn btn_form" (click)="open(content,'email')">Submit</button> -->
<button type="submit" class="btn btn_form" >Submit</button>
</div>
There is no output in when I am getting values in form control
angular6 selection angular-reactive-forms
angular6 selection angular-reactive-forms
asked Nov 15 '18 at 6:46
kunalkunal
36
asked Nov 15 '18 at 6:46
kunalkunal
36
edited Dec 4 '18 at 16:02
kunal
asked Nov 15 '18 at 6:46
kunalkunal
36
asked Nov 15 '18 at 6:46
kunalkunal
36
asked Nov 15 '18 at 6:46
kunalkunal
36
36
First of all, I do not see any Reactive form used in the stackblitz shared by you. Secondly, your section list contains checkboxes, that means one can select multiple, you should make them radio buttons to have only one selected or you can define a checkbox group having checkboxes with same name attribute ( this will help in getting only one selected). Let me know if this is what you wanted
– nircraft
Nov 19 '18 at 1:47
@nkuma_12 That's radio buttons, I have updated issue and code as well. You can check now.
– kunal
Dec 5 '18 at 7:38
take a look here for details: stackoverflow.com/a/46720577/9386929
– nircraft
Dec 5 '18 at 12:59
I have already gone through same code and that is not working for me that's why I put this question.
– kunal
Dec 6 '18 at 4:33
can you put up a stackblitz link with your component and mocked accounts data?
– nircraft
Dec 6 '18 at 13:54
add a comment |
First of all, I do not see any Reactive form used in the stackblitz shared by you. Secondly, your section list contains checkboxes, that means one can select multiple, you should make them radio buttons to have only one selected or you can define a checkbox group having checkboxes with same name attribute ( this will help in getting only one selected). Let me know if this is what you wanted
– nircraft
Nov 19 '18 at 1:47
@nkuma_12 That's radio buttons, I have updated issue and code as well. You can check now.
– kunal
Dec 5 '18 at 7:38
take a look here for details: stackoverflow.com/a/46720577/9386929
– nircraft
Dec 5 '18 at 12:59
I have already gone through same code and that is not working for me that's why I put this question.
– kunal
Dec 6 '18 at 4:33
can you put up a stackblitz link with your component and mocked accounts data?
– nircraft
Dec 6 '18 at 13:54
First of all, I do not see any Reactive form used in the stackblitz shared by you. Secondly, your section list contains checkboxes, that means one can select multiple, you should make them radio buttons to have only one selected or you can define a checkbox group having checkboxes with same name attribute ( this will help in getting only one selected). Let me know if this is what you wanted
– nircraft
Nov 19 '18 at 1:47
First of all, I do not see any Reactive form used in the stackblitz shared by you. Secondly, your section list contains checkboxes, that means one can select multiple, you should make them radio buttons to have only one selected or you can define a checkbox group having checkboxes with same name attribute ( this will help in getting only one selected). Let me know if this is what you wanted
– nircraft
Nov 19 '18 at 1:47
@nkuma_12 That's radio buttons, I have updated issue and code as well. You can check now.
– kunal
Dec 5 '18 at 7:38
@nkuma_12 That's radio buttons, I have updated issue and code as well. You can check now.
– kunal
Dec 5 '18 at 7:38
take a look here for details: stackoverflow.com/a/46720577/9386929
– nircraft
Dec 5 '18 at 12:59
take a look here for details: stackoverflow.com/a/46720577/9386929
– nircraft
Dec 5 '18 at 12:59
I have already gone through same code and that is not working for me that's why I put this question.
– kunal
Dec 6 '18 at 4:33
I have already gone through same code and that is not working for me that's why I put this question.
– kunal
Dec 6 '18 at 4:33
can you put up a stackblitz link with your component and mocked accounts data?
– nircraft
Dec 6 '18 at 13:54
can you put up a stackblitz link with your component and mocked accounts data?
– nircraft
Dec 6 '18 at 13:54
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313843%2fangular-reactive-form-unable-to-get-values-from-radio-button%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313843%2fangular-reactive-form-unable-to-get-values-from-radio-button%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
First of all, I do not see any Reactive form used in the stackblitz shared by you. Secondly, your section list contains checkboxes, that means one can select multiple, you should make them radio buttons to have only one selected or you can define a checkbox group having checkboxes with same name attribute ( this will help in getting only one selected). Let me know if this is what you wanted
– nircraft
Nov 19 '18 at 1:47
@nkuma_12 That's radio buttons, I have updated issue and code as well. You can check now.
– kunal
Dec 5 '18 at 7:38
take a look here for details: stackoverflow.com/a/46720577/9386929
– nircraft
Dec 5 '18 at 12:59
I have already gone through same code and that is not working for me that's why I put this question.
– kunal
Dec 6 '18 at 4:33
can you put up a stackblitz link with your component and mocked accounts data?
– nircraft
Dec 6 '18 at 13:54