如何在 Angular 中设置表单控件值 - Javascript

在 Angular 中，表单控件的值可以通过 FormGroup 或 FormControl 的 setValue() 或 patchValue() 方法来设置。FormGroup 用于管理一组表单控件，而 FormControl 用于管理单个表单控件。

使用 setValue() 设置表单控件值

setValue() 方法会设置 FormGroup 或 FormControl 中所有表单控件的值。例如，假设我们有一个 FormGroup 包含两个 FormControl，分别是 username 和 password。

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

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="formGroup">
      <label for="username">Username:</label>
      <input id="username" type="text" formControlName="username">
      <br><br>
      <label for="password">Password:</label>
      <input id="password" type="password" formControlName="password">
    </form>
  `
})
export class FormComponent {
  formGroup: FormGroup = new FormGroup({
    username: new FormControl(),
    password: new FormControl()
  });

  // 设置表单控件的值
  setValues() {
    this.formGroup.setValue({
      username: 'johndoe',
      password: 'pa$$w0rd'
    });
  }
}

在上面的例子中，我们使用 setValue() 方法将 username 设置为 'johndoe'，password 设置为 'pa$$w0rd'。

使用 patchValue() 设置表单控件值

patchValue() 方法可以用来部分地更新 FormGroup 或 FormControl 中的表单控件值。例如，我们可以将上面的例子改为只更新 username 的值。

setValues() {
  this.formGroup.patchValue({
    username: 'johndoe'
  });
}

在上面的例子中，我们只更新了 username 的值，而 password 的值保持不变。

总结

在 Angular 中，我们可以使用 setValue() 或 patchValue() 方法来设置表单控件的值。使用 setValue() 方法会设置 FormGroup 或 FormControl 中所有表单控件的值，而使用 patchValue() 方法则可以部分地更新表单控件的值。