Angular 4 错误消息应该 link 到无效的 formControl

Question

我正在使用以下内容。

1) FormBuilder

2) FormControl

如果 formControls 输入、无线电等无效，我已经创建了一个错误摘要来显示表单提交时的所有错误。我想做的是当用户点击错误消息时，他们应该被带到无效的输入字段。

我知道的几种方法是：

<a href="formControlElementID">Error message</a>
创建一个函数来设置点击焦点

我知道这些可以工作，但我正在寻找 Angular 特定的解决方案（如果存在的话）。我希望有某种方法可以 link 使用表单控件名称。

例如：

<input
  formControlName="signupFirstName"
  matInput/>

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

  or 

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

是否有内置的 FormControl 或 Angular 到 link 到 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

Angular 4 错误消息应该 link 到无效的 formControl

Angular 4 error message should link to invalid formControl

angular

angular2-forms

angular4-forms

angular2-formbuilder

angular2-form-validation

更新