Material mat-radio-button name attribute for simple form POST
I am working on some simple form converting it from bootstrap to Material.
Altough I am working with Angular 6, the form is posted old-style on submit (without any use of angular forms)
<form method="post" action="http://api.example.com/submit" id="user_form">
<mat-form-field>
<input matInput placeholder="name" name="username">
</mat-form-field>
<mat-radio-group required>
<mat-radio-button name="company" value="company1">company 1</mat-radio-button>
<mat-radio-button name="company" value="company2">company 2</mat-radio-button>
</mat-radio-group>
<button type="submit">submit</button>
</form>
For simplicity, I'd like to keep it this way, and I don't want to use any javascript to submit this form (no template-driven form OR reactive form).
The input is working great with adding name attribute to the imput and when I POST the form (click on the submit button) it sent to server as expected.
as for the mat-radio, this data isn't sent to server in the post data. I guess that the former is native input where mat-radio-button is a component.
Is there is a way to make this work? (again, without handling the form POST on the TS side)
angular angular-material radio radio-group
asked Dec 30 '18 at 4:38
ET-CSET-CS
2,35131732
add a comment |
I am working on some simple form converting it from bootstrap to Material.
Altough I am working with Angular 6, the form is posted old-style on submit (without any use of angular forms)
<form method="post" action="http://api.example.com/submit" id="user_form">
<mat-form-field>
<input matInput placeholder="name" name="username">
</mat-form-field>
<mat-radio-group required>
<mat-radio-button name="company" value="company1">company 1</mat-radio-button>
<mat-radio-button name="company" value="company2">company 2</mat-radio-button>
</mat-radio-group>
<button type="submit">submit</button>
</form>
For simplicity, I'd like to keep it this way, and I don't want to use any javascript to submit this form (no template-driven form OR reactive form).
The input is working great with adding name attribute to the imput and when I POST the form (click on the submit button) it sent to server as expected.
as for the mat-radio, this data isn't sent to server in the post data. I guess that the former is native input where mat-radio-button is a component.
Is there is a way to make this work? (again, without handling the form POST on the TS side)
angular angular-material radio radio-group
asked Dec 30 '18 at 4:38
ET-CSET-CS
2,35131732
You must put the [name] attribute on the mat-radio-group
– Erik van Velzen
Dec 30 '18 at 4:46
@ErikvanVelzen thank you. but that would bind the data into the component, and I'd have to add there also the logic for posting myself. I am trying to avoid this, as the entire form is currently working without TS (beside this field).
– ET-CS
Dec 30 '18 at 4:48
1
<mat-radio-group required name="company">
– yurzui
Dec 30 '18 at 4:50
1
Not sure what you mean. I think no other code is required other than setting the name attribute. I think you can even do it without square brackets just putting a string directly.
– Erik van Velzen
Dec 30 '18 at 4:52
@ErikvanVelzen adding name="company" directly on the <mat-radio-group> doesn't seems to work.
– ET-CS
Dec 30 '18 at 5:06
add a comment |
I am working on some simple form converting it from bootstrap to Material.
Altough I am working with Angular 6, the form is posted old-style on submit (without any use of angular forms)
<form method="post" action="http://api.example.com/submit" id="user_form">
<mat-form-field>
<input matInput placeholder="name" name="username">
</mat-form-field>
<mat-radio-group required>
<mat-radio-button name="company" value="company1">company 1</mat-radio-button>
<mat-radio-button name="company" value="company2">company 2</mat-radio-button>
</mat-radio-group>
<button type="submit">submit</button>
</form>
For simplicity, I'd like to keep it this way, and I don't want to use any javascript to submit this form (no template-driven form OR reactive form).
The input is working great with adding name attribute to the imput and when I POST the form (click on the submit button) it sent to server as expected.
as for the mat-radio, this data isn't sent to server in the post data. I guess that the former is native input where mat-radio-button is a component.
Is there is a way to make this work? (again, without handling the form POST on the TS side)
angular angular-material radio radio-group
asked Dec 30 '18 at 4:38
ET-CSET-CS
2,35131732
I am working on some simple form converting it from bootstrap to Material.
Altough I am working with Angular 6, the form is posted old-style on submit (without any use of angular forms)
<form method="post" action="http://api.example.com/submit" id="user_form">
<mat-form-field>
<input matInput placeholder="name" name="username">
</mat-form-field>
<mat-radio-group required>
<mat-radio-button name="company" value="company1">company 1</mat-radio-button>
<mat-radio-button name="company" value="company2">company 2</mat-radio-button>
</mat-radio-group>
<button type="submit">submit</button>
</form>
For simplicity, I'd like to keep it this way, and I don't want to use any javascript to submit this form (no template-driven form OR reactive form).
The input is working great with adding name attribute to the imput and when I POST the form (click on the submit button) it sent to server as expected.
as for the mat-radio, this data isn't sent to server in the post data. I guess that the former is native input where mat-radio-button is a component.
Is there is a way to make this work? (again, without handling the form POST on the TS side)
angular angular-material radio radio-group
angular angular-material radio radio-group
asked Dec 30 '18 at 4:38
ET-CSET-CS
2,35131732
asked Dec 30 '18 at 4:38
ET-CSET-CS
2,35131732
asked Dec 30 '18 at 4:38
ET-CSET-CS
2,35131732
asked Dec 30 '18 at 4:38
ET-CSET-CS
2,35131732
asked Dec 30 '18 at 4:38
ET-CSET-CS
2,35131732
2,35131732
You must put the [name] attribute on the mat-radio-group
– Erik van Velzen
Dec 30 '18 at 4:46
@ErikvanVelzen thank you. but that would bind the data into the component, and I'd have to add there also the logic for posting myself. I am trying to avoid this, as the entire form is currently working without TS (beside this field).
– ET-CS
Dec 30 '18 at 4:48
1
<mat-radio-group required name="company">
– yurzui
Dec 30 '18 at 4:50
1
Not sure what you mean. I think no other code is required other than setting the name attribute. I think you can even do it without square brackets just putting a string directly.
– Erik van Velzen
Dec 30 '18 at 4:52
@ErikvanVelzen adding name="company" directly on the <mat-radio-group> doesn't seems to work.
– ET-CS
Dec 30 '18 at 5:06
add a comment |
You must put the [name] attribute on the mat-radio-group
– Erik van Velzen
Dec 30 '18 at 4:46
@ErikvanVelzen thank you. but that would bind the data into the component, and I'd have to add there also the logic for posting myself. I am trying to avoid this, as the entire form is currently working without TS (beside this field).
– ET-CS
Dec 30 '18 at 4:48
1
<mat-radio-group required name="company">
– yurzui
Dec 30 '18 at 4:50
1
Not sure what you mean. I think no other code is required other than setting the name attribute. I think you can even do it without square brackets just putting a string directly.
– Erik van Velzen
Dec 30 '18 at 4:52
@ErikvanVelzen adding name="company" directly on the <mat-radio-group> doesn't seems to work.
– ET-CS
Dec 30 '18 at 5:06
You must put the [name] attribute on the mat-radio-group
– Erik van Velzen
Dec 30 '18 at 4:46
You must put the [name] attribute on the mat-radio-group
– Erik van Velzen
Dec 30 '18 at 4:46
@ErikvanVelzen thank you. but that would bind the data into the component, and I'd have to add there also the logic for posting myself. I am trying to avoid this, as the entire form is currently working without TS (beside this field).
– ET-CS
Dec 30 '18 at 4:48
@ErikvanVelzen thank you. but that would bind the data into the component, and I'd have to add there also the logic for posting myself. I am trying to avoid this, as the entire form is currently working without TS (beside this field).
– ET-CS
Dec 30 '18 at 4:48
1
1
<mat-radio-group required name="company">– yurzui
Dec 30 '18 at 4:50
<mat-radio-group required name="company">– yurzui
Dec 30 '18 at 4:50
1
1
Not sure what you mean. I think no other code is required other than setting the name attribute. I think you can even do it without square brackets just putting a string directly.
– Erik van Velzen
Dec 30 '18 at 4:52
Not sure what you mean. I think no other code is required other than setting the name attribute. I think you can even do it without square brackets just putting a string directly.
– Erik van Velzen
Dec 30 '18 at 4:52
@ErikvanVelzen adding name="company" directly on the <mat-radio-group> doesn't seems to work.
– ET-CS
Dec 30 '18 at 5:06
@ErikvanVelzen adding name="company" directly on the <mat-radio-group> doesn't seems to work.
– ET-CS
Dec 30 '18 at 5:06
add a comment |
1 Answer
1
active
oldest
votes
try something like this
in html
<mat-radio-group formControlName="gender">
<mat-label>Gender:</mat-label>
<mat-radio-button color="primary" value="male">Male</mat-radio-button
>
<mat-radio-button color="primary" value="female">Female</mat-radio-button>
</mat-radio-group>
in ts
this.signupForm = new FormGroup({
gender: new FormControl("", Validators.required),
});
answered Jan 1 at 6:20
Anil Kumar Reddy AAnil Kumar Reddy A
4818
Thank you. please read my question. it's not what I asked. I wanted a solution for old-style form post without any TS involved.
– ET-CS
Jan 8 at 12:42
add a comment |
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
});
}
});
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%2f53975321%2fmaterial-mat-radio-button-name-attribute-for-simple-form-post%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
try something like this
in html
<mat-radio-group formControlName="gender">
<mat-label>Gender:</mat-label>
<mat-radio-button color="primary" value="male">Male</mat-radio-button
>
<mat-radio-button color="primary" value="female">Female</mat-radio-button>
</mat-radio-group>
in ts
this.signupForm = new FormGroup({
gender: new FormControl("", Validators.required),
});
answered Jan 1 at 6:20
Anil Kumar Reddy AAnil Kumar Reddy A
4818
Thank you. please read my question. it's not what I asked. I wanted a solution for old-style form post without any TS involved.
– ET-CS
Jan 8 at 12:42
add a comment |
try something like this
in html
<mat-radio-group formControlName="gender">
<mat-label>Gender:</mat-label>
<mat-radio-button color="primary" value="male">Male</mat-radio-button
>
<mat-radio-button color="primary" value="female">Female</mat-radio-button>
</mat-radio-group>
in ts
this.signupForm = new FormGroup({
gender: new FormControl("", Validators.required),
});
answered Jan 1 at 6:20
Anil Kumar Reddy AAnil Kumar Reddy A
4818
Thank you. please read my question. it's not what I asked. I wanted a solution for old-style form post without any TS involved.
– ET-CS
Jan 8 at 12:42
add a comment |
try something like this
in html
<mat-radio-group formControlName="gender">
<mat-label>Gender:</mat-label>
<mat-radio-button color="primary" value="male">Male</mat-radio-button
>
<mat-radio-button color="primary" value="female">Female</mat-radio-button>
</mat-radio-group>
in ts
this.signupForm = new FormGroup({
gender: new FormControl("", Validators.required),
});
answered Jan 1 at 6:20
Anil Kumar Reddy AAnil Kumar Reddy A
4818
try something like this
in html
<mat-radio-group formControlName="gender">
<mat-label>Gender:</mat-label>
<mat-radio-button color="primary" value="male">Male</mat-radio-button
>
<mat-radio-button color="primary" value="female">Female</mat-radio-button>
</mat-radio-group>
in ts
this.signupForm = new FormGroup({
gender: new FormControl("", Validators.required),
});
answered Jan 1 at 6:20
Anil Kumar Reddy AAnil Kumar Reddy A
4818
answered Jan 1 at 6:20
Anil Kumar Reddy AAnil Kumar Reddy A
4818
answered Jan 1 at 6:20
Anil Kumar Reddy AAnil Kumar Reddy A
4818
answered Jan 1 at 6:20
Anil Kumar Reddy AAnil Kumar Reddy A
4818
4818
Thank you. please read my question. it's not what I asked. I wanted a solution for old-style form post without any TS involved.
– ET-CS
Jan 8 at 12:42
add a comment |
Thank you. please read my question. it's not what I asked. I wanted a solution for old-style form post without any TS involved.
– ET-CS
Jan 8 at 12:42
Thank you. please read my question. it's not what I asked. I wanted a solution for old-style form post without any TS involved.
– ET-CS
Jan 8 at 12:42
Thank you. please read my question. it's not what I asked. I wanted a solution for old-style form post without any TS involved.
– ET-CS
Jan 8 at 12:42
add a comment |
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.
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%2f53975321%2fmaterial-mat-radio-button-name-attribute-for-simple-form-post%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
You must put the [name] attribute on the mat-radio-group
– Erik van Velzen
Dec 30 '18 at 4:46
@ErikvanVelzen thank you. but that would bind the data into the component, and I'd have to add there also the logic for posting myself. I am trying to avoid this, as the entire form is currently working without TS (beside this field).
– ET-CS
Dec 30 '18 at 4:48
1
<mat-radio-group required name="company">– yurzui
Dec 30 '18 at 4:50
1
Not sure what you mean. I think no other code is required other than setting the name attribute. I think you can even do it without square brackets just putting a string directly.
– Erik van Velzen
Dec 30 '18 at 4:52
@ErikvanVelzen adding name="company" directly on the <mat-radio-group> doesn't seems to work.
– ET-CS
Dec 30 '18 at 5:06