Я пытаюсь проверить действительное состояние пользовательского проверенного поля в Реактивной форме.
Мой компонент, как показано ниже:
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, настроенный, как показано ниже, где я устанавливаю значение поля возраста, а затем проверяю, является ли он действительным - тест возвращает достоверность как ложное:
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 была каким-то образом подключена к тестовому компоненту, но я не могу понять, как - кто-нибудь может предложить, как я мог бы это сделать (если это вообще возможно) )
В конечном итоге я пытаюсь проверить правильность формы, чтобы убедиться, что она может быть отправлена, когда все необходимые поля являются действительными.