Question

我正在尝试在Reactive表单上测试自定义验证字段的有效状态。

我的组件如下：

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { ageRangeValidator } from './age-range-validator.directive';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Reactive Forms';
  genders = ['Female', 'Male'];

  constructor(private fb: FormBuilder) { }

  userForm = this.fb.group({
    firstname: ['', [Validators.required, Validators.minLength(2)]],
    surname: ['', [Validators.required, Validators.minLength(2)]],
    address: this.fb.group({
      houseNo: [''],
      street: [''],
      city: [''],
      postcode: ['']
    }),
    // Section 1
    // age: [null, Validators.min(18)],
    // Section 2 - using a Custom validator
    age: [null, ageRangeValidator(18, 68)],
    gender: ['']
  });
}

ageRangeValidator函数如下-已经过全面测试并可以正常工作：

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function ageRangeValidator(min: number, max: number): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    if ((!isNaN(control.value) && control.value) && control.value > min && control.value < max) {
      return { 'ageRange': true };
    }
    return null;
  };
}

我对App组件进行了如下设置的测试，在其中设置了age字段的值，然后进行测试以查看其是否有效-测试返回的有效性为false：

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import { DebugElement } from '@angular/core';

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let app: AppComponent;


  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [ReactiveFormsModule]
    }).compileComponents();

  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.debugElement.componentInstance;
    fixture.detectChanges();
  });
  
  describe(`Test the validity of the fields`, () => {
    it(`should return true if a value of 18 or more AND 68 or LESS is supplied (as string or number)`, () => {
      const age = app.userForm.controls['age'];
      age.setValue(42);
      expect(age.valid).toBeTruthy();
    });
  });

我希望该解决方案需要将ageRangeValidator函数以某种方式连接到测试组件，但是我无法弄清楚如何-有人可以建议我可以这样做的方式（如果有可能的话））？

最终，我正在尝试测试表单的有效性，以确保在所有必填字段均有效时可以提交该表单。

Answer 1

使用controls.get（'age'）尝试避免直接到达控件
设置值后，您需要https://angular.io/api/core/testing/tick才能运行验证过程

Answer 2

对于涉及此问题的其他任何人，如果您正确编写了自定义验证器，则无需做任何特殊的事情。如果遇到参考错误，只需重新保存文件即可。在响应式表单规范中连接自定义验证器没有什么特别的事情，您甚至不必将其导入到规范文件中。

测试在Angular中具有自定义验证器的反应形式字段

2 个答案: