Angular 4错误消息应链接到无效的formControl

我正在使用以下命令

1） 造模工

2） 窗体控件

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

我知道我能做到这一点的几种方法是：

创建一个函数来设置单击的焦点

我知道这些可以工作，但我正在寻找一个角度特定的解决方案，如果存在的话。我希望通过某种方式使用表单控件名进行链接

例：

以及尝试使用[inputName]=name将导致相同的问题

正确：

<input #nameInputField formControlName="name">

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

其中一种方法是使用模板变量和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>


用户名



名称

用户名错误
名称错误


name.focus是使用Id/#name还是formControlName？这在不同的组件中也会起作用吗？我的错误消息是一个组件。表单组件为每个错误生成一个。也感谢您花时间复习。“name”代表#name。至于不同的组件，让我想想：）我会尝试一下，让你们知道子组件引用父组件是否有效。这似乎是一个相当不错的解决方案。还有更好的方法吗？在子组件中工作出色。在不进行大量javascript操作的情况下传递非常有用的值。模板变量非常棒。谢谢你的帮助。非常感谢：）
<input #nameInputField formControlName="name">

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

<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>