Сообщение об ошибке Angular 4 должно ссылаться на неверный formControl

Question

Я использую следующее.

1) FormBuilder

2) FormControl

Я создал сводку ошибок, чтобы показать все ошибки при отправке формы, если ввод formControls, радио и т. Д. Недопустим. То, что я хотел бы сделать, - когда пользователь нажимает на сообщение об ошибке, он должен быть перенесен в поле ввода, которое является недействительным.

Я знаю, что могу сделать это несколькими способами:

1. <a href="formControlElementID">Error message</a>

2. Создать функцию, чтобы установить фокус на клике

Я знаю, что они могут работать, но я ищу конкретное угловое решение, если оно существует. Я надеюсь на какой-то способ связи с использованием имени элемента управления формы.

Пример:

<input
  formControlName="signupFirstName"
  matInput/>

<div id="error-summary>
  <a href="signupFirstName><p></p></a>

  or 

  <a angularDirective=""><p></p></a>
</div>

Есть ли что-то встроенное в FormControl или угловой, чтобы связать с formControll элемент ввода? Кажется излишним в использовании <a href="id"> так как это, скорее всего, будет то же имя, что и formControl а также добавляет #id на URL, который затем добавляет больше работы для маршрутизации. Javascript способ установить фокус работает, но больше кода.

Исходя из этого, я предполагаю, что для этого сейчас должен быть какой-то способ.

Обновить

Относительно ответа @Vegas. Это работает хорошо, однако, если вы используете форму группы, вы должны называть имя переменной шаблона другим, иначе при передаче значения дочернему компоненту, а также formControlName он попытается передать переменную шаблона для обоих.

Неправильно:

<input #name formControlName="name">

<child-component [inputName]="name" [inputValidation]="name"

Попытка использовать [inputName]=name вызовет ту же проблему.

Правильный:

<input #nameInputField formControlName="name">

<child-component [inputName]="nameInputField" [inputValidation]="name"

Answer 1

Один из способов сделать это может быть с помощью шаблонных переменных и ngIf:

<form novalidate (submit)="onLoginSubmit()" [formGroup]="user">
    Username <input id="username" type="text" #username autofocus formControlName="username">
    <br><br>
    Name <input id="name" type="text" #name autofocus formControlName="name">
    <ul>
        <li (click)="name.focus()" *ngIf="user.get('username').hasError('required')">Error on username</li>
        <li (click)="username.focus()" *ngIf="user.get('name').hasError('required')">Error on name</li>
    </ul>
</form>

демонстрация