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

Posted 2023-03-13

【中文标题】Angular 4 错误消息应链接到无效的 formControl

【英文标题】：Angular 4 error message should link to invalid formControl

【发布时间】：2018-11-16 15:26:16

【问题描述】：

我正在使用以下内容。

1) 表单生成器

2) 表单控件

如果 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 添加到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"

【参考方案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

【讨论】：

name.focus 是使用 Id / #name 还是 formControlName？以及这将在不同的组件中工作吗？我的错误信息是一个组件。表单组件为每个错误生成一个。也感谢您抽出宝贵时间进行审核。

"name" 用于#name。至于不同的组件，让我想想:)

我会试一试，让你知道它是否适用于子组件引用父组件。这似乎是一个相当不错的解决方案。还有更好的方法吗？

在子组件中表现出色。在不进行大量 javascript 操作的情况下传入非常有用的值。模板变量很棒。感谢您的帮助。

非常感谢 :)