Question

我正在使用Angular 8和Reactive Forms。

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

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

这个想法是，如果validationError为“ truthy”，则会在输入元素上添加一个红色边框。

无法获取对 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) {}

}

如何从模板访问当前的FormControl

2 个答案: