如何在Angular中选择immediately_apply单选框禁用指定输入框？

有两种常用方法可以实现这个需求：

方法一：模板内直接绑定禁用状态 #

直接在模板中通过模板引用变量获取单选组的当前值，动态绑定输入框的disabled属性，简单直观：

<label>repeat mode:</label>
<mat-radio-group class="repeat_group" formGroupName="is_cron" #repeatModeGroup>
    <mat-radio-button class="repeat_button" id="1" value="daily_repaet">daily</mat-radio-button>
    <mat-radio-button class="repeat_button" id="2" value="immediately_apply">immediately</mat-radio-button>
</mat-radio-group>

<div class="field">
    <label>start:</label>
    <mat-form-field appearance="fill" class="time_field">
        <mat-label>minute</mat-label>
        <input type="number" matInput formControlName="minute_start" class="dir-ltr" min="0" max="60" 
               [disabled]="repeatModeGroup.value === 'immediately_apply'">
    </mat-form-field>
    <mat-form-field appearance="fill" class="time_field">
        <mat-label>hour</mat-label>
        <input type="number" matInput formControlName="hour_start" class="dir-ltr" min="0" max="24" 
               [disabled]="repeatModeGroup.value === 'immediately_apply'">
    </mat-form-field>
</div>

方法二：通过组件类监听表单变化控制禁用状态 #

如果需要在单选框切换时执行额外逻辑，推荐用响应式表单的valueChanges监听值变化，在组件类中控制输入框状态：

组件类代码 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  mainForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单结构（根据实际业务调整）
    this.mainForm = this.fb.group({
      is_cron: this.fb.group({
        repeatMode: ['daily_repaet'] // 绑定单选组的控件
      }),
      minute_start: [0],
      hour_start: [0]
    });

    // 监听单选框值变化，控制输入框禁用状态
    this.mainForm.get('is_cron.repeatMode')?.valueChanges.subscribe(selectedValue => {
      const isImmediate = selectedValue === 'immediately_apply';
      const minuteCtrl = this.mainForm.get('minute_start');
      const hourCtrl = this.mainForm.get('hour_start');

      isImmediate ? (minuteCtrl?.disable(), hourCtrl?.disable()) : (minuteCtrl?.enable(), hourCtrl?.enable());
    });
  }
}

对应HTML调整 #

<label>repeat mode:</label>
<mat-radio-group class="repeat_group" formGroupName="is_cron" formControlName="repeatMode">
    <mat-radio-button class="repeat_button" id="1" value="daily_repaet">daily</mat-radio-button>
    <mat-radio-button class="repeat_button" id="2" value="immediately_apply">immediately</mat-radio-button>
</mat-radio-group>

<div class="field">
    <label>start:</label>
    <mat-form-field appearance="fill" class="time_field">
        <mat-label>minute</mat-label>
        <input type="number" matInput formControlName="minute_start" class="dir-ltr" min="0" max="60">
    </mat-form-field>
    <mat-form-field appearance="fill" class="time_field">
        <mat-label>hour</mat-label>
        <input type="number" matInput formControlName="hour_start" class="dir-ltr" min="0" max="24">
    </mat-form-field>
</div>

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