Angular表单初始化时，如何根据单选框默认值禁用表单控件？

问题出在：你的代码仅在单选框触发change事件时才会执行禁用/启用weight输入框的逻辑，但表单初始化时，虽然gender已经设为默认值female，却没有触发这个逻辑，导致weight输入框保持启用状态。

下面提供两种可行的解决方法：

方法一：初始化时手动执行禁用逻辑 #

在组件初始化阶段，直接根据gender的默认值判断并设置weight的禁用状态，只需实现OnInit接口并在ngOnInit方法中添加逻辑即可：

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

export class AppComponent implements OnInit {
  form = new FormGroup({
    gender: new FormControl('female', Validators.required),
    weight: new FormControl(22),
  });

  get f() {
    return this.form.controls;
  }

  ngOnInit() {
    // 初始化时根据gender默认值处理weight的禁用状态
    if (this.form.get('gender')?.value === 'female') {
      this.form.controls.weight.disable();
    }
  }

  submit() {
    console.log(this.form.value);
  }

  changeGender(e) {
    if (e.target.value === 'female') {
      this.form.controls.weight.disable();
    } else {
      this.form.get('weight').enable();
    }
  }
}

方法二：通过表单控件的valueChanges监听值变化（更推荐） #

这种方式完全基于Angular响应式表单的特性，监听gender控件的所有值变化（包括初始值），无需依赖DOM的change事件，更符合响应式表单的设计理念：

组件类修改： #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';

export class AppComponent implements OnInit, OnDestroy {
  form = new FormGroup({
    gender: new FormControl('female', Validators.required),
    weight: new FormControl(22),
  });
  // 保存订阅实例，用于组件销毁时清理
  private genderSub?: Subscription;

  get f() {
    return this.form.controls;
  }

  ngOnInit() {
    // 监听gender控件的值变化
    this.genderSub = this.form.get('gender')?.valueChanges.subscribe(gender => {
      gender === 'female' 
        ? this.form.controls.weight.disable() 
        : this.form.controls.weight.enable();
    });
  }

  ngOnDestroy() {
    // 销毁订阅，避免内存泄漏
    this.genderSub?.unsubscribe();
  }

  submit() {
    console.log(this.form.value);
  }
}

模板修改（移除DOM的change事件绑定）： #

<div class="container">
  <form [formGroup]="form" (ngSubmit)="submit()">
    <div class="form-group">
      <label for="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>
    <input type="text" formControlName="weight" placeholder="weight" />
    <br />
    <br />
    <button class="btn btn-primary" type="submit" [disabled]="!form.valid">
      Submit
    </button>
  </form>
</div>

两种方法对比：

• 方法一简单直接，适合逻辑简单的场景；
• 方法二能自动处理所有gender值变化的情况（包括通过代码修改gender值的场景），且无需依赖DOM事件，是更规范的响应式表单实现方式。

内容的提问来源于stack exchange，提问作者tangel