简单表单 POST 的材料垫单选按钮名称属性答案

【问题标题】：Material mat-radio-button name attribute for simple form POST简单表单 POST 的材料垫单选按钮名称属性
【发布时间】：2019-05-27 06:29:05
【问题描述】：

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

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

为简单起见，我想保持这种方式，并且我不想使用任何 javascript 来提交此表单（没有模板驱动的表单或反应式表单）。

输入非常适合将名称属性添加到输入中，当我发布表单（单击提交按钮）时，它按预期发送到服务器。

对于 mat-radio，此数据不会在 post 数据中发送到服务器。我猜前者是本机输入，其中 mat-radio-button 是一个组件。

有没有办法让这个工作？（再次，在 TS 端不处理表单 POST）

【问题讨论】：

您必须将 [name] 属性放在 mat-radio-group 上
@ErikvanVelzen 谢谢。但这会将数据绑定到组件中，我还必须在那里添加发布自己的逻辑。我试图避免这种情况，因为整个表单目前在没有 TS 的情况下工作（在这个字段旁边）。
<mat-radio-group required name="company">
不确定你的意思。我认为除了设置 name 属性之外不需要其他代码。我想你甚至可以不用方括号直接放一个字符串。
@ErikvanVelzen 在上直接添加 name="company" 似乎不起作用。

标签： angular angular-material radio radio-group

【解决方案1】：

试试这样的

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

在ts中

this.signupForm = new FormGroup({
      gender: new FormControl("", Validators.required),

    });

【讨论】：

谢谢。请阅读我的问题。这不是我问的。我想要一个不涉及任何 TS 的旧式表单发布解决方案。