如何实现选择「其他」选项时将Mat-Select转为输入框

当然可以实现这个功能，以下是基于你提供的Angular Material代码的具体实现步骤：

1. 修改HTML模板 #

在同一个mat-form-field中，通过*ngIf控制下拉框和输入框的显示切换，同时调整表单验证提示：

<div class="col-sm-4 require">
  <mat-form-field class="example-full-width">
    <!-- 下拉框：选中非「其他」选项时显示 -->
    <mat-select 
      *ngIf="formControls.otherCulturalBackgroundID.value !== 'other_option_id'" 
      autofocus 
      placeholder="你认同哪种文化背景或种族？" 
      formControlName="otherCulturalBackgroundID"
      [ngClass]="{ 'is-invalid': submitted && formControls.otherCulturalBackgroundID.errors }"
    >
      <mat-option *ngFor="let race of masterRace" [value]="race.id">
        {{race.value}}
      </mat-option>
    </mat-select>

    <!-- 输入框：选中「其他」选项时显示 -->
    <input 
      *ngIf="formControls.otherCulturalBackgroundID.value === 'other_option_id'" 
      matInput 
      placeholder="请说明你的文化背景或种族" 
      formControlName="customCulturalBackground"
      [ngClass]="{ 'is-invalid': submitted && formControls.customCulturalBackground.errors }"
    >

    <mat-error *ngIf="submitted && (formControls.otherCulturalBackgroundID.errors || formControls.customCulturalBackground.errors)">
      请选择或填写文化背景
    </mat-error>
  </mat-form-field>
</div>

2. 调整组件TS逻辑 #

需要在表单中新增自定义输入的控件，监听下拉框的选中值变化，动态设置输入框的验证规则：

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

// 组件类中
yourForm: FormGroup;
submitted = false;

constructor(private formBuilder: FormBuilder) {}

ngOnInit(): void {
  // 初始化表单
  this.yourForm = this.formBuilder.group({
    otherCulturalBackgroundID: ['', Validators.required],
    customCulturalBackground: ['']
  });

  // 监听下拉框值变化，动态控制输入框验证
  this.formControls.otherCulturalBackgroundID.valueChanges.subscribe(selectedId => {
    const customCtrl = this.formControls.customCulturalBackground;
    // 替换成你「其他」选项对应的实际ID
    const otherOptionId = 'other_option_id';

    if (selectedId === otherOptionId) {
      // 选中「其他」时，输入框设为必填
      customCtrl.setValidators(Validators.required);
    } else {
      // 选中其他选项时，清空输入框并移除验证
      customCtrl.clearValidators();
      customCtrl.setValue('');
    }
    // 更新输入框的验证状态
    customCtrl.updateValueAndValidity();
  });
}

// 获取表单控件的快捷方式
get formControls() {
  return this.yourForm.controls;
}

// 表单提交方法示例
onSubmit() {
  this.submitted = true;
  if (this.yourForm.invalid) {
    return;
  }
  // 处理提交逻辑，可根据选中值判断是用下拉框ID还是自定义输入值
  const selectedValue = this.formControls.otherCulturalBackgroundID.value === 'other_option_id' 
    ? this.formControls.customCulturalBackground.value 
    : this.formControls.otherCulturalBackgroundID.value;
  console.log('提交的值:', selectedValue);
}

注意事项 #

• 请将代码中的'other_option_id'替换为你masterRace数组中「其他（请说明选项）」对应的实际ID值
• 表单提交时，可通过判断选中的ID来决定使用下拉框的选中值还是输入框的自定义内容
• 该方案保持了Angular表单验证的一致性，确保用户必须选择或填写内容才能提交

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