使用 FormControl 输入测试表单

Question

所以我有一个像这样的组件：

@Component({
    selector: 'bg-formfield-markdown',
    host: {
        class: 'forminput',
        '[class.forminput-is-error]': 'isErrorState',
        '[class.forminput-locked]': 'isLockedState',
    },
    template: `<md-editor (ngModelChange)="change()" [(ngModel)]="markdown_content" [upload]="doUpload"></md-editor>`,
    styleUrls: ['./formfield-markdown.css'],
    encapsulation: ViewEncapsulation.ShadowDom
})
export class FormFieldMarkdown implements OnChanges, AfterViewInit {

在那里，我将

FormControl

传递为

@Input

，如下所示：

@Input() control: FormControl;

然后我可以在其他组件中使用它，如下所示：

<bg-formfield-markdown
    class="l-formsection-x-inputoffset"
    [control]="issueForm.rawControlMap.narrative"
    label="How did the recipient earn this badge?">
</bg-formfield-markdown>

在我的单元测试中，我像这样配置测试模块：

TestBed.configureTestingModule({
  declarations: [
      FormFieldMarkdown,
      BgMarkdownComponent,
      MarkdownHintsDialog
  ],
  imports: [
      RouterTestingModule,
      CommonModule,
      ...COMMON_IMPORTS,
  ],
  providers: [
      ...COMMON_MOCKS_PROVIDERS_WITH_SUBS,
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
}).compileComponents();
fixture = TestBed.createComponent(FormFieldMarkdown);
fixture.componentInstance.control = new FormControl('', Validators.required);
fixture.detectChanges();
component = fixture.debugElement.componentInstance;

但是，此操作失败并显示以下错误消息：

Error: NG01203: No value accessor for form control unspecified name attribute. Find more at https://angular.io/errors/NG01203

error properties: Object({ code: -1203 })
    at _throwMissingValueAccessorError (http://localhost:9876/_karma_webpack_/vendor.js:180376:9)
    at setUpControl (http://localhost:9876/_karma_webpack_/vendor.js:180158:29)
    at NgModel._setUpStandalone (http://localhost:9876/_karma_webpack_/vendor.js:181307:5)
    at NgModel._setUpControl (http://localhost:9876/_karma_webpack_/vendor.js:181295:33)
    at NgModel.ngOnChanges (http://localhost:9876/_karma_webpack_/vendor.js:181254:12)
    at NgModel.rememberChangeHistoryAndInvokeOnChangesHook (http://localhost:9876/_karma_webpack_/vendor.js:142324:10)
    at callHookInternal (http://localhost:9876/_karma_webpack_/vendor.js:143324:10)
    at callHook (http://localhost:9876/_karma_webpack_/vendor.js:143351:5)
    at callHooks (http://localhost:9876/_karma_webpack_/vendor.js:143308:9)
    at executeInitAndCheckHooks (http://localhost:9876/_karma_webpack_/vendor.js:143262:5)

我（还有其他人）发现这个错误消息非常没有帮助，并且无法真正弄清楚出了什么问题。我尝试将 here 中描述的提供程序以及组件本身添加到

TestBed

配置中。然而，我真的不知道

forwardRef

应该指什么；

FormControl

、

FormFieldMarkdown

，还是其他组件？无论如何，我尝试过的方法都不起作用。 我还尝试导入一些其他组件和东西，但这也没有帮助。

此外，在我们升级 Angular 之前，这个单元测试应该已经有效了。整个项目是开源，所以请随意查看代码以获取更多上下文。我觉得无法创建一个最小的示例或任何类似的东西，因为我根本不熟悉 Angular（而且我觉得这对于熟悉它的人来说可能是一个简单的解决方案）。

Answer 1

FormControl

完全没有任何关系 - 我只是误解了这方面的错误消息。问题是我的组件使用了

this

降价编辑器。必要的模块已正确导入到我的通用模块中，但在我的测试中未正确导入。因此，我通过在 LMarkdownEditorModule 配置中导入

TestBed

并添加必要的脚本、资产和导入来修复它。详细信息请参阅

此提交

；我认为这不太相关，因为它与我最初在这个问题中要求的内容无关。 也许对于随机偶然发现此问题的人来说，您不应该尝试从该错误消息中获取

任何

信息，而只是尝试生成一个产生错误的最小示例来调试它。