如何从 Angular 中的表单标签之间获取选定的值 - Javascript

在 Angular 中，表单标签通常用于收集用户数据，例如文本框、单选按钮、下拉列表等。在用户提交表单之前，您需要从这些标签中收集所选的值，以便以适当的方式处理表单数据。

在本文中，我们将介绍如何使用 Angular 获取表单标签之间的选定值。我们将使用 Angular 的模板驱动表单和反应式表单两种方法来演示这个过程。

模板驱动表单

模板驱动表单是通过模板来定义表单的输入和验证规则。这种方法使用 NgForm 和 NgModel 指令来追踪表单状态，并从表单标签中收集选定的值。以下是如何从单选按钮和下拉列表中获取所选值的示例。

单选按钮

下面的代码演示如何从单选按钮中获取所选值：

<form #myForm="ngForm">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="radMale" value="male" name="gender" [(ngModel)]="gender">
    <label class="form-check-label" for="radMale">Male</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="radFemale" value="female" name="gender" [(ngModel)]="gender">
    <label class="form-check-label" for="radFemale">Female</label>
  </div>
</form>

在上面的代码中，我们使用 [(ngModel)] 指令将选择的值绑定到组件的属性 "gender" 上。这将允许我们在提交表单时访问其值。

下拉列表

下面的代码演示如何从下拉列表中获取所选值：

<form #myForm="ngForm">
  <select class="form-control" id="selCountry" name="country" [(ngModel)]="selectedCountry">
    <option value="">--- Please select one ---</option>
    <option *ngFor="let country of countries" [value]="country">{{ country }}</option>
  </select>
</form>

在上面的代码中，我们使用 [(ngModel)] 指令将所选的选项绑定到组件的属性 "selectedCountry" 上。请注意，我们将下拉列表的选项绑定到一个数组中，这将允许我们动态地为下拉列表添加选项。

反应式表单

反应式表单是一种更高级的表单处理方法，它使用 RxJS 来跟踪表单的状态。在这种方法中，您可以使用 FormGroup、FormControl 和 FormArray 类来定义表单控件，并使用.value 属性来访问它们的值。

以下是如何从单选按钮和下拉列表中获取所选值的示例。

单选按钮

下面的代码演示如何从单选按钮中获取所选值：

<form [formGroup]="myForm">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="radMale" value="male" formControlName="gender">
    <label class="form-check-label" for="radMale">Male</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="radFemale" value="female" formControlName="gender">
    <label class="form-check-label" for="radFemale">Female</label>
  </div>
</form>

在上面的代码中，我们通过 formControlName 属性将选定的值绑定到表单控件的 "gender" 属性上。在组件中，我们可以使用以下代码来访问表单值：

const genderValue = this.myForm.get('gender').value;

请注意，我们使用 get() 方法从表单中获取 "gender" 控件的引用。

下拉列表

下面的代码演示如何从下拉列表中获取所选值：

<form [formGroup]="myForm">
  <select class="form-control" id="selCountry" formControlName="selectedCountry">
    <option value="">--- Please select one ---</option>
    <option *ngFor="let country of countries" [value]="country">{{ country }}</option>
  </select>
</form>

在上面的代码中，我们通过 formControlName 属性将选定的值绑定到表单控件的 "selectedCountry" 属性上。在组件中，我们可以使用以下代码来访问表单值：

const selectedCountryValue = this.myForm.get('selectedCountry').value;

请注意，我们使用 get() 方法从表单中获取 "selectedCountry" 控件的引用。

结论

在本文中，我们介绍了如何使用 Angular 获取表单标签之间的选定值。我们使用了模板驱动表单和反应式表单两种方法来演示这个过程。

在使用表单时，您还需要验证和处理输入数据。如果您想深入了解 Angular 中的表单处理，请查看 Angular 官方文档。