如何从模板访问当前的 FormControl答案

【问题标题】：How to access current FormControl from template如何从模板访问当前的 FormControl
【发布时间】：2020-04-06 03:07:35
【问题描述】：

我正在使用 Angular 8 和响应式表单。

在我的模板中，我的代码如下所示：

<input type="text" 
class="form-control" formControlName="name" 
placeholder="name" 
[class.is-invalid]="validationError(formControl)" />

想法是，如果validationError 是“真实的”，则将红色边框添加到输入元素。

无法将 FormControl 的引用传递给 validationError 函数。请注意，表单中有很多数组，因此模板引用（即#name）可能很棘手。有没有一种简单的方法可以从模板中获取对由 formControlName 指定的当前表单控件的引用？

【问题讨论】：

用form.get('name')怎么样？
另请注意，Angular 会自动将类 ng-invalid 添加到控件中。因此，只需在样式表中添加此 CSS 类的定义即可在所有输入上自动实现您想要的效果，而无需向模板添加任何内容。

标签： angular angular-reactive-forms

【解决方案1】：

你可以为此创建一个指令，注入 NgControl，参见：

模板：

<input type="text" class="form-control" formControlName="name" placeholder="name" appValidationError/>

打字稿：

...

import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appValidationError]'
})
export class ValidationError {

  @HostBinding('class.is-invalid') get isInvalid() { return this.ngControl.invalid; }

  constructor(private ngControl: NgControl) {}

}

【讨论】：

用 HostBinding 装饰一个简单返回 this.ngControl.invalid 的 getter 会简单得多
我相信仅仅使用HostBinding不会在值发生变化时更新它们

【解决方案2】：

您可以通过从表单中获取控件来传递它。：

[class.is-invalid]="validationError(form.get('name'))"

【讨论】：

这就是答案，唯一要补充的是，在 Angular 表单项目中，使用 getNameInput(){ return this.form.get('name')} 为 formControl 创建一个 getter 是很常见的这样至少您的模板中没有表单控件名称，哎呀