角度形式:等价于构造函数ngForm对反应形式的注入

Question

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

<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似乎只是为模板表单注入的。是否有一个等效的Reactive Forms提供程序可以访问附带的FormGroup？

Answer 1

不要注入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]";
}
}

示例