Material mat-select name attribute

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 (no 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-form-field>
      <mat-select placeholder="user-type" name="usertype">
         <mat-option value="type1">type1</mat-option>
         <mat-option value="type2">type2</mat-option>
      </mat-select>
   </mat-form-field>

   <button type="submit">submit</button>

</form>

For simplicity, I'd would like to keep it this way, and don't use any javascript on submiting 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-select, this data isn't sent to server in the post data. I guess that the former is native input where mat-select is a component.

Is there is a way to make this work? (again, without handling the form POST on the TS side)

Answer 1

There's a way to set name attribute to the mat-select element directly.

In order to achieve it you need to use a [attr.name] construction. In the end the code would look like this.

   <mat-form-field>
      <mat-select placeholder="user-type" [attr.name]="'usertype'">
         <mat-option value="type1">type1</mat-option>
         <mat-option value="type2">type2</mat-option>
      </mat-select>
   </mat-form-field>

Demo: stackblitz.com