1

我正在使用以下内容。

1) 表单生成器

2) 表单控件

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

我知道我可以做到的几种方法是：

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

  2. 创建一个函数来设置点击焦点

我知道这些可以工作，但如果存在，我正在寻找一个 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">因为它很可能与 the 同名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"
4

1 回答 1

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>

演示

于 2018-06-06T21:30:28.093 回答