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-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，此数据未在发布数据中发送到服务器。我猜前者是本地输入，其中mat-radio-button是一个组件。

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

Answer 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),

    });

简单表单POST

1 个答案: