材料材质-选择名称属性

Question

我正在做一些简单的形式转换它从引导到材料。

尽管我使用的是Angular 6，但表单在提交时是老式的(不使用angular表单)

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

为了简单起见，我希望保持这种方式，并且在提交此表单时不使用任何javascript (没有模板驱动的表单或反应式表单)。

input可以很好地将name属性添加到imput中，当我发布表单(单击submit按钮)时，它会按预期发送到服务器。

对于mat-select，此数据不会在post数据中发送到服务器。我猜前者是原生input，而mat-select是一个组件。

有没有办法做到这一点？(同样，不在TS端处理表单张贴)

Answer 1

找到答案了。

只需像这样使用原生select：

<select matNativeControl placeholder="user-type" name="usertype" required>
  <option value="" disabled selected></option>
  <option value="type1">type1</option>
  <option value="type2">type2</option>
</select>

Answer 2

不，你无法做到这一点。

与input场不同，mat-select是由div和span组成的角度分量。

​

​

您只能发送它的绑定值。

Answer 3

有一种方法可以直接将name属性设置为mat-select元素。

为了实现它，你需要使用一个[attr.name]结构。最后，代码将如下所示。

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

演示：stackblitz.com