Angular中表单控件锚点链接失效问题求助

问题根源 #

你的锚点链接无法跳转至对应表单控件，核心原因是目标<input>元素未设置与formControlName匹配的id属性。浏览器的锚点机制依赖页面中id属性与href片段一致的元素，而当前表单控件仅绑定了formControlName，缺少对应的id。

解决方案 #

1. 给表单控件添加对应id #

修改FormControlsComponent.html中的<input>标签，添加[id]绑定，值与formControlName保持一致：

<ng-container *ngIf="field">
<form [formGroup]="formGroup" class="govcy-form">
    <div class="input-wrapper govcy-form-control">
        <input 
        [type]="field?.type" 
        [formControlName]="field?.formControlName" 
        [id]="field?.formControlName" <!-- 新增：绑定id与formControlName -->
        [readonly]="field?.isReadOnly" 
        [ngClass]="{
         'govcy-text-input': field?.formControlName !== 'code',
         'custom-input': field?.formControlName === 'code',
         'govcy-text-input-error': isFormControlInvalid(field, formGroup)
        }" 
        [maxlength]="field?.maxLength" />
    </div>
</form>

2. （可选）优化跳转体验与无障碍支持 #

若需要更平滑的滚动效果或增强无障碍体验，可在ErrorComponent中添加自定义跳转逻辑：

步骤1：修改ErrorComponent的a标签

<a 
  target="_self" 
  href="#{{control.formControlName}}" 
  aria-describedby="error_message_id"
  (click)="scrollToControl(control.formControlName); $event.preventDefault()"
  *ngFor="let error of control?.validations"
>
  {{ 'Common.EnterYourText' | translate }} {{ control.label | translate }}
</a>

步骤2：在ErrorComponent的TS文件中添加滚动方法

scrollToControl(controlName: string): void {
  const targetElement = document.getElementById(controlName);
  if (targetElement) {
    targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
    targetElement.focus(); // 让控件获得焦点，辅助屏幕阅读器用户
  }
}

3. 特殊场景处理（多重复控件） #

若页面存在多个相同formControlName的控件（如循环渲染的表单），需确保id唯一性：

• 在FormControlsComponent中修改id绑定：[id]="'input-' + field?.formControlName"
• 在ErrorComponent中同步修改href：href="#input-{{control.formControlName}}"

内容的提问来源于stack exchange，提问作者Hassan Lasheen