时间戳

首页 > 解决方案 > 角度形式：等效于反应形式的构造函数 ngForm 注入？

angular - 角度形式：等效于反应形式的构造函数 ngForm 注入？

问题描述

我正在尝试构建一个组件来显示如下验证错误消息：

<form>
  <input ngModel name="firstname" required>
  <validation-error for="firstname"></validation-error> 
</form>

该<validation-error>组件对于模板驱动表单来说非常简单，因为我们可以NgFrom在构造函数中注入并使用ngFrom.form.get(myControlName)它来查找控件及其状态：

@Component({
  selector: 'validation-error',
  template: `{{errorText}}`,
  styles: [`:host { display:block; color:red; }`]
})
export class ValidationErrorComponent  {
  @Input() for: string;  // name of input element
  constructor(
    @Optional() private ngForm: NgForm  // This works for Template forms only.
  ) { }

  get errorText() : string {
    const formControl = <FormControl>this.ngForm.form.get(this.for);
    return (formControl.errors) ? JSON.stringify(formControl.errors) : "[no error]";
  }
}

但NgForm唯一似乎是为模板表单注入的。是否有等效的响应式表单提供程序可以访问封闭的FormGroup？

标签： angularformsangular-reactive-formsangular-providers

解决方案

不要注入 ngForm，而是使用 ControlContainer 来访问 FormControls。

控制容器

包含多个已注册 NgControl 实例的指令的基类。

@Component({
  selector: 'validation-error',
  template: `{{errorText}}`,
  styles: [`:host { display:block; color:red; }`]
})
export class ValidationErrorComponent  {
  @Input() for: string;  // name of input element
  constructor(
     @Optional() private control: ControlContainer
  ) { }

  get errorText() : string {
    const formControl = <FormControl>(this.control as any).form.get(this.for);
    return (formControl.errors) ? JSON.stringify(formControl.errors) : "[no error]";
  }
}

例子

推荐阅读