angular - 如何从模板访问当前的 FormControl

Question

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

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

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

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

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

Answer 1

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

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

Answer 2

您可以为此创建一个指令，注入 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) {}

}