Сообщение об ошибке 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 или Angular для ссылки на 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>

Demo