Angular无法检测type为button的input值变更，如何实现表单校验？

我开发了一个带HTML表单的Angular组件，表单同时用自定义JavaScript处理。表单里有个<input type="button">作为选择选项的上下文菜单使用。
当input类型是text时，Angular能立刻检测到输入变化并响应；但改成button类型后，点击弹出上下文菜单选完参数，参数会写入input的value属性，这时Angular完全没反应。
怎么让Angular检测到这些值的变更，实现对该input的表单校验？

HTML代码 #

<form [formGroup]="loginForm" (submit)="submit()">

    <div class="select__wrap relative">
       <input type="hidden" value="" class="select__title-value">
       <input type="button" formControlName="selectDepartament" id="selectDepartament" class="select__btn" value="">
       <div class="select__box">
          <ul class="select__container">
             <li class="select__title">Real estate</li>
             <li class="select__value">Sell</li>
             <li class="select__value">buy</li>
          </ul>
       </div>
    </div>

    <div class="select__wrap">
       <input type="button" formControlName="selectCity" id="selectCit" class="select__btn" value="">
       <div class="select__box">
          <div class="select__scroll">
             <ul class="select__container">
                <li class="select__value">State of Idaho</li>
                <li class="select__value">State of Iowa</li>
                <li class="select__value">State of Alabama</li>
             </ul>
          </div>
       </div>
    </div>

    <div *ngIf="selectCity.errors?.['required']"> Choose city </div>
    <div *ngIf="selectDepartament.errors?.['required']"> Select State </div>

</form>

TypeScript代码 #

declare function clickFunction(): void;

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css']
})
export class AddComponent implements OnInit{

  loginForm!:FormGroup;

  constructor(private formBuilder: FormBuilder) {
  }

  ngOnInit(): void {
    clickFunction()
    
    this.loginForm = this.formBuilder.group({
      selectCity: ['', {
        validators: [
          Validators.required,
        ]
      }],
      selectDepartament: ['', {
        validators: [
          Validators.required,
        ]
      }]

    });
  }

  get selectCity() {
    return this.loginForm.controls['selectCity'];
  }

  get selectDepartament() {
    return this.loginForm.controls['selectDepartament'];
  }

}

JavaScript代码 #

'use strict';
document.addEventListener('DOMContentLoaded', clickFunction);

function clickFunction () {
  
  const select = document.querySelectorAll('.select__wrap');
  
  document.addEventListener('click', (e) => {

    // 处理选择器点击
    select.forEach((item) => {
      const selectBtn = item.querySelector('.select__btn'),
        selectBox = item.querySelector('.select__box'),
        selectContainer = item.querySelectorAll('.select__container'),
        selectTitleValue = item.querySelector('.select__title-value'),
        selectClick = e.composedPath().includes(selectBtn);

      if (selectClick) {
        selectBox.classList.toggle('open');
      }

      // 将选中值写入value
      selectContainer.forEach((item) => {
        const selectTitle = item.querySelector('.select__title'),
          selectValue = item.querySelectorAll('.select__value');

        selectValue.forEach((value) => {
          const selectValueClick = e.composedPath().includes(value);

          if (selectValueClick) {
            selectBtn.value = value.textContent;
            selectBox.classList.remove('open');
            if (selectTitle) {
              selectTitleValue.value = selectTitle.textContent;
            }
          } else if (!selectClick || selectValueClick) {
            selectBox.classList.remove('open');
          }
        });
      });
    });


  });

}

核心原因 #

Angular表单控件只会监听表单元素的标准输入事件（比如input、change），而<input type="button">本身不会触发这些事件，你通过原生JS直接修改value属性时，Angular的变更检测机制完全感知不到。

方法一：手动更新FormControl值（推荐） #

直接在原生JS选择选项后，调用Angular表单控件的setValue或patchValue方法更新值，这样Angular会同步感知到变化并触发校验。

1. 在组件类中添加公开方法：

updateFormControl(controlName: string, value: string) {
  const control = this.loginForm.controls[controlName];
  control.setValue(value);
  // 标记为已修改并更新校验状态
  control.markAsDirty();
  control.updateValueAndValidity();
}

2. 修改原生JS代码，在设置selectBtn.value后调用组件方法：

// 获取组件实例（根据你的组件选择器调整）
const addComponent = document.querySelector('app-add');

// 在selectValueClick的判断逻辑里添加：
if (selectValueClick) {
  selectBtn.value = value.textContent;
  selectBox.classList.remove('open');
  if (selectTitle) {
    selectTitleValue.value = selectTitle.textContent;
  }
  // 获取控件名并调用组件方法
  const controlName = selectBtn.getAttribute('formControlName');
  if (controlName && addComponent) {
    addComponent.updateFormControl(controlName, value.textContent);
  }
}

方法二：触发标准输入事件 #

如果不想直接调用Angular方法，可以在修改value后手动触发input或change事件，让Angular误以为是用户输入：

if (selectValueClick) {
  selectBtn.value = value.textContent;
  // 手动触发input事件
  selectBtn.dispatchEvent(new Event('input'));
  selectBox.classList.remove('open');
  if (selectTitle) {
    selectTitleValue.value = selectTitle.textContent;
  }
}

这个方法更轻量，但部分Angular版本对button类型的input事件监听可能不敏感，优先推荐方法一。

方法三：替换为隐藏的text输入框 #

把<input type="button">改成纯展示用的元素（比如<button>或<div>），然后在旁边放一个隐藏的<input type="text">绑定formControlName，选择选项后更新隐藏输入框的value：

<div class="select__wrap relative">
  <input type="hidden" formControlName="selectDepartament" class="select__hidden-input">
  <button type="button" id="selectDepartament" class="select__btn">
    {{ loginForm.get('selectDepartament')?.value || '' }}
  </button>
  <!-- 下拉菜单部分不变 -->
</div>

修改原生JS代码：

if (selectValueClick) {
  const hiddenInput = item.querySelector('.select__hidden-input');
  hiddenInput.value = value.textContent;
  hiddenInput.dispatchEvent(new Event('input'));
  // 更新按钮显示文本
  selectBtn.textContent = value.textContent;
  selectBox.classList.remove('open');
  if (selectTitle) {
    selectTitleValue.value = selectTitle.textContent;
  }
}

这个方法更符合Angular表单的设计思路，避免混用button类型和表单控件绑定。

内容的提问来源于stack exchange，提问作者New York is my city