Angular响应式表单如何禁用input元素required属性的默认校验？

解决方案一：动态控制表单控件启用/禁用（无需移除required属性） #

Angular响应式表单中，禁用状态的控件不会参与任何校验逻辑，你只要在切换选择框值的同时，同步设置对应输入框控件的启用/禁用状态即可解决默认校验触发的问题：

1. 组件初始化时监听选择框的值变化，同步切换两个输入框控件状态：

ngOnInit() {
  // 初始化时先根据默认type值设置控件状态
  this.syncControlState(this.form.get('type').value);
  // 监听type变化同步状态
  this.form.get('type').valueChanges.subscribe(type => {
    this.syncControlState(type);
  })
}

private syncControlState(type: string) {
  const type1Ctrl = this.form.get('type1_value');
  const type2Ctrl = this.form.get('type2_value');
  if (type === 'TYPE1') {
    type1Ctrl.enable();
    type2Ctrl.disable();
    type2Ctrl.reset(); // 可选：清空隐藏控件值避免脏数据
  } else if (type === 'TYPE2') {
    type2Ctrl.enable();
    type1Ctrl.disable();
    type1Ctrl.reset();
  } else {
    type1Ctrl.disable();
    type2Ctrl.disable();
  }
}

2. 模板中还是保留输入框的required属性即可，隐藏的控件因为处于禁用状态，默认校验器不会触发，不会出现多余的错误提示。

解决方案二：移除required属性，自定义必填视觉提示 #

如果你不想操作控件的启用禁用状态，可以直接移除两个输入框的required属性，自己实现和Angular Material原生一致的必填星号提示：

1. 先添加星号样式：

.mat-mdc-form-field .required-asterisk {
  color: var(--mdc-outlined-text-field-input-text-error-color, #f44336);
  margin-left: 4px;
}

2. 模板中动态展示星号：

<!-- Type1 输入框 -->
<mat-label>
  Type1 value
  <span *ngIf="form.get('type').value === 'TYPE1'" class="required-asterisk">*</span>
</mat-label>

<!-- Type2 输入框 -->
<mat-label>
  Type2 value
  <span *ngIf="form.get('type').value === 'TYPE2'" class="required-asterisk">*</span>
</mat-label>

这种方案的视觉效果和原生required完全一致，用户感知不到差异，也不会触发默认的非空校验。

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