响应式表单获取控制值 - TypeScript

本文将介绍如何使用响应式表单获取控制值，并使用TypeScript增强其类型安全性。

响应式表单

Angular中的表单是响应式的，它使用 FormControl、FormGroup 和 FormArray 类来管理表单控件的值和状态。它还提供了一些指令来处理表单控件的交互，如 ngModel 和 FormControlDirective。

当用户与表单控件交互时，值和状态将自动更新，并且可以订阅表单值的更改以执行其他操作。

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm" (submit)="onSubmit()">
      <label>
        Name:
        <input type="text" formControlName="name">
      </label>

      <label>
        Age:
        <input type="number" formControlName="age">
      </label>

      <button type="submit">Submit</button>
    </form>
  `
})
export class MyFormComponent {
  myForm = new FormGroup({
    name: new FormControl(),
    age: new FormControl()
  });

  onSubmit() {
    console.log(this.myForm.value);  // { name: 'John', age: 30 }
  }
}

获取表单控制值

对于 FormControl，使用 value 属性来获取当前值。对于 FormGroup 和 FormArray，它们的值是一个对象或数组，这意味着需要指定一个键或索引来获取单个控件的值。

由于表单控件值可以是任何类型，因此需要进行类型断言或使用泛型来保证类型安全。

const nameControl = this.myForm.get('name') as FormControl;
const nameValue: string = nameControl.value;

const ageControl = this.myForm.get('age') as FormControl;
const ageValue: number = ageControl.value;

const myFormValue: { name: string, age: number } = this.myForm.value;

TypeScript类型安全

为了增强类型安全性，可以使用泛型来指定表单控件类型和表单值类型。

interface MyFormData {
  name: string;
  age: number;
}

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm" (submit)="onSubmit()">
      <label>
        Name:
        <input type="text" formControlName="name">
      </label>

      <label>
        Age:
        <input type="number" formControlName="age">
      </label>

      <button type="submit">Submit</button>
    </form>
  `
})
export class MyFormComponent {
  myForm = new FormGroup<MyFormData>({
    name: new FormControl(),
    age: new FormControl()
  });

  onSubmit() {
    const myFormData: MyFormData = this.myForm.value;
    console.log(myFormData.name);  // string
    console.log(myFormData.age);  // number
  }
}

结论

Angular的响应式表单使表单控件值与视图同步，并且可以订阅表单值的更改以执行其他操作。使用泛型可以增强类型安全性。