单击验证摘要中具有锚标记的错误消息时，如何聚焦输入字段？

Question

当单击验证摘要中具有锚标记的错误消息时，如何聚焦输入字段？

我为输入字段创建了自定义组件，并为验证摘要创建了自定义组件。 我已经创建了一个测试页面，其中正在使用这两个自定义组件，并且我有一个提交按钮。

testpage.html

<app-validation-summary [form]="inputFieldsForm" [isFormSubmitted]="isSubmitted"></app-validation-summary>

<app-input-field formControlName="firstname" [inputFieldControl]="inputFieldsFormControls.firstname" [label]="'Label'"
[id]="'firstnameId'" [isFormSubmitted]="isSubmitted"></app-input-field>

<app-input-field formControlName="lastname" [inputFieldControl]="inputFieldsFormControls.lastname"
[label]="'Label'" [id]="'lastnameId'" [isFormSubmitted]="isSubmitted"></app-input-field>

<button type="submit" (click)="onSubmit()" id="input-fields-form-action-button">Submit</button>

当我单击“提交”按钮时，则会出现必填字段的内联错误，并且验证摘要中还会显示相同的错误消息。 验证摘要中显示的错误消息具有链接/锚标记，并且在单击该错误消息时应将焦点放在适当的输入字段上。 例如：-在验证摘要中，我收到2条错误消息，一个是“ Firstname is required”，另一个是“ Lastname is required” 当我单击“必须输入名字”错误消息时，则应将名字输入字段突出显示。

我正在考虑在锚标签的href中传递输入字段的ID。 但是，如何在验证摘要自定义组件中获取输入字段的ID？

对于代码，请找到我所引用的实现验证摘要自定义组件的链接。 http://www.deanpdx.com/2018/02/04/angular-5-forms-dynamic-validation-summary.html