如何在Angular中使用表单生成器禁用字段

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

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="inputField" placeholder="输入框">
      <input type="checkbox" formControlName="disableCheckbox"> 禁用输入框
    </form>
  `
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      inputField: [''],
      disableCheckbox: [false]
    });

    // 监听复选框的变化
    this.myForm.get('disableCheckbox').valueChanges.subscribe(value => {
      const inputField = this.myForm.get('inputField');
      if (value) {
        inputField.disable(); // 禁用输入框
      } else {
        inputField.enable(); // 启用输入框
      }
    });
  }
}

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

@Component({
  selector: 'app-my-form',
  template: `...`
})
export class MyFormComponent implements OnInit, OnDestroy {
  myForm: FormGroup;
  private subscription: Subscription;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      inputField: [''],
      disableCheckbox: [false]
    });

    this.subscription = this.myForm.get('disableCheckbox').valueChanges.subscribe(value => {
      const inputField = this.myForm.get('inputField');
      if (value) {
        inputField.disable();
      } else {
        inputField.enable();
      }
    });
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}