如何对 ngx-formly 进行单元测试？

Question

我正在尝试正式对 ngx 进行单元测试，但出现以下错误：

[Formly Error] The validator "emailValidator" could not be found. Please make sure that is registered through the FormlyModule declaration.

我也查看了angular正式的文档，他们用同样的方式编写了代码。

文档：

FIELD WITH CUSTOM VALIDATION
You just need to include the name of the validate function, declared in FormlyModule, within the property validators.validation.

{
  key: 'ip',
  type: 'input',
  templateOptions: {
    label: 'IP Address (using custom validation declared in ngModule)',
    required: true,
  },
  validators: {
    validation: ['ip'],
  },
},

文档 Link：https://formly.dev/guide/validation

** 我的代码 **

form.component.ts:

export class FormComponent {
  fields: FormlyFieldConfig[] = [
    {
      key: 'email',
      type: 'input',
      templateOptions: {
        label: 'Email address',
        placeholder: 'Enter email',
        type: 'email',
        required: true,
        attributes: {
          autocapitalize: 'off',
          autocorrect: 'off',
          autocomplete: 'off',
        },
      },
      validators: {
        validation: ['emailValidator'],
      },
    },
  ];

form.component.spec.ts:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyMaterialModule } from '@ngx-formly/material';

import { FormComponent } from './form.component';

describe('FormComponent', () => {
  let component: FormComponent;
  let fixture: ComponentFixture<FormComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ FormComponent],
      imports: [
        FormlyModule.forRoot(),
        FormlyMaterialModule,
        ReactiveFormsModule,
      ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(FormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

});

有人可以指导我吗？任何线索都会有所帮助！谢谢！

Answer 1

能否分享一下您的 App.module 文件内容？您的“emailValidator”必须在 app.module 文件的导入部分注册通过以下方式：

imports: [
FormlyModule.forRoot({
   validators: [
                { name: 'emailvalidator', validation: validator_function_name },
               
              ]
           )}

请在此处查看https://formly.dev/examples/validation/custom-validation

如何对 ngx-formly 进行单元测试？

How to unit test ngx-formly?

validation

unit-testing

angular-formly

angular

ngx-formly