角反应型可注射

Question

我有一个关于我目前面临的问题的问题，我已经开发了一个小的实用程序组件，它可以作为通用的"错误显示部件"；。

export class ShowErrorComponent {
// path refering to the form-element
@Input('path') controlPath = '';
@Input('name') formName = '';
constructor(private ngForm: NgForm) {}
get errorMessages(): string[] | null {
const form = this.ngForm.form;
const control = form.get(this.controlPath);
if (!control || !control.touched || !control.errors) {
return null;
}
return this.getDisplayMessages(control.errors);
}
....
}

我使用的ShowErrorComponent有两种形式。一种形式是用模板驱动的方法开发的，另一种形式则是用反应式方法开发的。对于模板驱动的方法，errorComponent完成所需的工作，例如打印错误消息。然而，如果我使用反应式方法，我的表单不会被呈现，我会收到以下错误消息：

ERROR NullInjectorError: R3InjectorError(AppModule)[NgForm -> NgForm -> NgForm]: 
NullInjectorError: No provider for NgForm!
at NullInjector.get (core.mjs:6359:27)
at R3Injector.get (core.mjs:6786:33)
at R3Injector.get (core.mjs:6786:33)
at R3Injector.get (core.mjs:6786:33)
at ChainedInjector.get (core.mjs:13769:36)
at lookupTokenUsingModuleInjector (core.mjs:3293:39)
at getOrCreateInjectable (core.mjs:3338:12)
at Module.ɵɵdirectiveInject (core.mjs:10871:12)
at NodeInjectorFactory.ShowErrorComponent_Factory [as factory] (show-error.component.ts:9:32)
at getNodeInjectable (core.mjs:3523:44)

我在以下上下文中调用错误组件：

<form
novalidate
class="register-form"
(ngSubmit)="registerMember(registerForm.value)"
[formGroup]="registerForm"
>
<div formGroupName="personalInfo">
<div class="form-group">
<h3>Personal info:</h3>
<div class="input-group mb-3">
<label class="input-group-text" for="gender">Gender</label>
<select class="form-select" id="membership" formControlName="gender">
<option value="diverse">Diverse</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<app-show-error name="Gender" path="personalInfo.gender"></app-show-error>
...
</div>
...
</div>
</div>

registerForm变量引用我的Formgroup，在构造函数中初始化，并正确呈现(如果注释掉(

这里再次显示与前面的html片段相关联的组件的相关代码片段：

constructor(fb: FormBuilder) {
this.registerForm = fb.group({
personalInfo: fb.group({
gender: ['diverse'],
firstname: ['', [Validators.required]],
lastname: ['', [Validators.required]],
birthdate: [new Date(), [Validators.required]]
}),
...
}

我已将ReactiveFormModule添加到我的Register模块中。所以我的问题是为什么会出现错误？

Answer 1

NgForm只存在于模板驱动的表单上，这就是为什么在反应式示例中会出现注入错误的原因。

为了使错误组件同时使用这两个表单库，您可以注入ControlContainer，并从中获得对根formDirective的访问权限。它应该是这样的：

export class ShowErrorComponent {
...
constructor(private controlContainer: ControlContainer) {}
get errorMessages(): string[] | null {
const rootDir = this.controlContainer.formDirective as (NgForm|FormGroupDirective)
const form = rootDir.form;
const control = form.get(this.controlPath);
...
}
...
}

干杯