使用 spring boot mvc 和 angular，此 ngModel 文本输入表单的无线电等效项是什么？

Question

我正在学习有关制作员工 CRUD 模型的教程，该模型使用 spring 启动和 mysql 服务器作为后端，angular 作为前端。在创建部分，它有这个表单组（我正在添加新字段的性别部分）。

    <div class="form-group">
            <label>
                Gender </label>
            <input type="text" class="form-control" id="gender" required [(ngModel)]="employee.gender" name="gender">
        </div>

这在提交时会起作用（即创建员工）。但我无法弄清楚如何将它变成一个单选按钮并提交它（它只是卡在创建页面上）。这是我在遵循单选按钮示例时尝试做的。

<div class="form-group">

            <label for [(ngModel)]="employee.gender">Gender:</label>
            <div>
                <input id="male" type="radio" value="male" name="gender" formControlName="gender">
                <label for="male">Male</label>
            </div>

            <div>
                <input id="female" type="radio" value="female" name="gender" formControlName="gender">
                <label for="female">Female</label>
            </div>
        </div>

我的理解需要更多的工作，但我正在努力学习。任何帮助表示赞赏。谢谢

Answer 1

您想使用单选按钮设置 obj employee 属性 gender。

您可以将单选按钮分组并使用 (change) 事件来设置性别。我不久前创建了这个例子，如果你重构这个例子并使 onChange(event: any) 设置 event.value 等于你的 employee.gender.

，它应该符合你的需要

<mat-radio-group aria-label="Select an option" (change)="onChange($event)">
  <mat-radio-button value="1">Option 1 Male</mat-radio-button>
  <mat-radio-button value="2">Option 2 Female</mat-radio-button>
  <br>
  <br>
  Selected value: {{selectedValue | json}}, send to backend sex as: {{selectedSexObj | json}}
</mat-radio-group>

@Component({
  selector: 'radio-overview-example',
  templateUrl: 'radio-overview-example.html',
  styleUrls: ['radio-overview-example.css'],
})
export class RadioOverviewExample {
  selectedSexObj = { male: false, female: false };
  selectedValue: any;
  onChange(event: any) {
    this.selectedValue = event.value;
    if (event.value == 1) {
      this.selectedSexObj = { male: true, female: false };
    } else {
      this.selectedSexObj = { male: false, female: true };
    }
  }
}

这是一个工作示例：https://stackblitz.com/edit/angular-qggcqg-qydurn?file=src%2Fapp%2Fradio-overview-example.ts

Answer 2

在 Angular 中，有 two different approaches 涉及使用表单：

在 Template-driven 表单的情况下，我们使用 ngModel 进行数据绑定，而在响应式表单的情况下，我们使用 FormControls。

问题中共享的第一个示例使用 Template-driven 方法，具有两个选项可供选择的单选按钮等效代码为：

<div class="form-group">
  <label>Gender:</label>
  <div>
    <input id="male" type="radio" value="male" name="gender" [(ngModel)]="employee.gender">
    <label for="male">Male</label>
  </div>

  <div>
    <input id="female" type="radio" value="female" name="gender" [(ngModel)]="employee.gender">
    <label for="female">Female</label>
  </div>
</div>

在响应式表单方法的情况下，您可以简单地将 [(ngModel)]="employee.gender" 替换为 formControlName="gender"，前提是您在 FormGroup 中定义了一个名为 gender 的 FormControl。

使用 spring boot mvc 和 angular，此 ngModel 文本输入表单的无线电等效项是什么？

What would be the radio equivalent of this ngModel text input form, using spring boot mvc and angular?

radio-button

angular-ngmodel

angular