如何根据条件设置输入框必填状态？Angular表单问题求助

我来帮你梳理下这个场景的解决方案，你的核心需求是根据下拉选项控制输入框的显隐，同时在隐藏时清空输入值并取消必填校验对吧？先从你现有代码的问题入手，再给出完整优化方案：

首先修复TypeScript里的关键错误 #

你当前的changed方法里有个低级语法问题：if (this.selectedIndustry = 13)是赋值操作，不是比较！这会导致每次触发都会把selectedIndustry设为13，逻辑完全错误，必须改成严格相等的===（或宽松相等==）。

优化后的完整逻辑实现 #

1. TypeScript代码调整

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

// 组件类内的方法和初始化逻辑
constructor(private fb: FormBuilder) {}

ngOnInit() {
  // 初始化表单，otherIndustry初始无必填验证
  this.form = this.fb.group({
    industry: this.fb.group({
      id: [null, Validators.required]
    }),
    otherIndustry: ['']
  });
  this.show = false;
}

changed(e: any) {
  const selectedId = e.value;
  // 更新行业下拉框的表单值
  this.form.get('industry.id')?.setValue(selectedId);
  
  // 判断是否显示其他行业输入框
  this.show = selectedId === 13;

  const otherIndustryControl = this.form.get('otherIndustry');
  if (!otherIndustryControl) return;

  if (!this.show) {
    // 隐藏时：清空值 + 重置校验状态 + 移除必填验证
    otherIndustryControl.setValue('');
    otherIndustryControl.markAsPristine();
    otherIndustryControl.markAsUntouched();
    otherIndustryControl.clearValidators();
    otherIndustryControl.updateValueAndValidity({ emitEvent: false });
  } else {
    // 显示时：添加必填+长度验证
    otherIndustryControl.setValidators([
      Validators.required,
      Validators.maxLength(50)
    ]);
    otherIndustryControl.updateValueAndValidity({ emitEvent: false });
  }
}

2. 模板代码优化

<!-- 行业下拉选择框 -->
<div>
  <mat-form-field formGroupName="industry">
    <mat-select formControlName="id" placeholder="Industry" (selectionChange)="changed($event)">
      <mat-option [value]="null">None</mat-option>
      <mat-option *ngFor="let item of industries" [value]="item.id"> {{item.name}} </mat-option>
    </mat-select>
    <div *ngIf="form.get('industry.id')?.invalid && (form.get('industry.id')?.dirty || form.get('industry.id')?.touched)" class="alert alert-danger">
      <mat-error *ngIf="form.get('industry.id')?.errors?.required">Must fill this field</mat-error>
    </div>
  </mat-form-field>
</div>

<!-- 其他行业输入框 -->
<div class="field-wrapper" *ngIf="show">
  <div class="question-wrapper">
    <h3 class="mat-subheading-1"> Other Industry </h3>
  </div>
  <div class="field-box">
    <mat-form-field>
      <input matInput 
             [required]="show" 
             placeholder="Other Industry (min 1 to max 50 characters)" 
             formControlName="otherIndustry" 
             maxlength="50" 
             id="otherTypeOfSoftware"/>
      <div *ngIf="form.get('otherIndustry')?.invalid && (form.get('otherIndustry')?.dirty || form.get('otherIndustry')?.touched)" class="alert alert-danger">
        <mat-error *ngIf="form.get('otherIndustry')?.errors?.required">Must fill this field</mat-error>
        <mat-error *ngIf="form.get('otherIndustry')?.errors?.maxlength">Maximum 50 characters allowed</mat-error>
      </div>
    </mat-form-field>
  </div>
</div>

关键优化点说明 #

• 修正条件判断错误：把赋值操作=改成严格比较===，确保逻辑正确性
• 同步表单校验状态：隐藏输入框时，不仅清空值，还重置控件的pristine/untouched状态，避免之前的错误提示残留；同时动态添加/移除验证器，确保表单校验逻辑与显隐状态完全同步
• 避免依赖局部变量：模板里直接通过form.get('xxx')获取控件状态，替代之前的f或industryForm局部变量，逻辑更清晰
• 控制表单事件触发：调用updateValueAndValidity时添加{ emitEvent: false }，避免不必要的表单值变更事件触发

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