Question

我正在使用以下内容。

1）FormBuilder

2）FormControl

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

我知道我能做到的几种方式是：

<a href="formControlElementID">Error message</a>
创建一个功能，将焦点设置为点击

我知道这些可行，但我正在寻找Angular特定的解决方案（如果存在）。我希望以某种方式使用表单控件名称进行链接。

前：

<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添加到网址，然后会为路由添加更多工作。设置焦点的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错误消息应链接到无效的formControl

的更新

1 个答案: