材质垫选择名称属性答案

【问题标题】：Material mat-select name attribute材质垫选择名称属性
【发布时间】：2018-12-30 01:59:58
【问题描述】：

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

虽然我正在使用 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）

【问题讨论】：

标签： angular angular-material

【解决方案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>

【讨论】：

【解决方案2】：

有一种方法可以直接将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

【讨论】：

【解决方案3】：

不，你无法做到这一点。

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

你只能发送它的绑定值。

【讨论】：

【解决方案4】：

我一直在搜索相同的内容，并通过绑定隐藏的输入字段解决了这个问题。无需编写代码隐藏。

<mat-form-field>
  <mat-select #matSelect placeholder="user-type">
     <mat-option value="type1">type1</mat-option>
     <mat-option value="type2">type2</mat-option>
  </mat-select>
</mat-form-field>
<input type="hidden" name="usertype" [value]="matSelect.value" />

【讨论】：