材质垫选择名称属性

Question

我正在研究一种简单的形式，将其从引导程序转换为材料。

尽管我正在使用Angular 6，但该表单在提交时已过时发布（不使用角度表单）

<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，当我发布表单（单击提交按钮）时，表单将按预期发送到服务器。

对于mat-select，此数据未在发布数据中发送到服务器。 我猜前者是本地input，其中mat-select是组件。

有没有办法使这项工作有效？ （同样，无需在TS端处理POST表单）

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