Material mat-radio-button name attribute for simple form POST

Question

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)

@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
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
@ErikvanVelzen adding name="company" directly on the <mat-radio-group> doesn't seems to work. — ET-CS

Anil Kumar Reddy A Anil Kumar Reddy A · Accepted Answer · 2019-01-01T06:20:19

try something like this

in html

<mat-radio-group formControlName="gender">
      <mat-label>Gender:</mat-label>&nbsp;
      <mat-radio-button color="primary" value="male">Male</mat-radio-button
      >&nbsp;
      <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),

    });

Material mat-radio-button name attribute for simple form POST

1 Answers