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

user_3879958 0
Viewed 3417

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)

radio-group angular-material angular radio-button
1 Answers

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),

    });
user_82964990
Related