Блог

Я абстрагирую каждое поле из своей формы следующим образом (это работает в разработке, но не в моем модульном тесте).

 // required.control.ts import { FormControl, Validators } from '@angular/forms';    export class RequiredControl extends FormControl {  protected textErrors: { [key: string]: string } = {  required: 'Mandatory field'  };    constructor(value: string | any = '') {  super(value);    this.setValidators([Validators.required]);  }    get textError() {  let message = '';  for (const error in this.textErrors) {  if (error amp;amp; this.hasError(error) amp;amp; this.dirty) {  message = this.textErrors[error];    return message;  }  }    return message;  }    get state() {  return this.valid || !this.dirty ? '' : 'error';  }  }  

Таким образом, я могу очистить свою форму и перенести логику проверки для каждого поля в отдельный файл. Теперь в основной компонент я импортирую этот файл:

 // my-component.component.ts import { RequiredControl } from './required.control.ts';  @Component({}) export class MyComponent implements OnInit { // I skiped import for this OnInit   reasonControl = new RequiredControl(null);   constructor() {}   ngOnInit() {  this.requestForm = this.formBuilder.group({  reason: this.reasonControl, // first method tried :(  reason:this.reasonControl as FormControl, // second method tried :(  });  } }  

В моих модульных тестах у меня есть следующее:

 beforeEach(async(() =gt; {  TestBed.configureTestingModule({  declarations: [MyComponent],  imports: [ReactiveFormsModule, FormsModule, RouterTestingModule]   }) }));  

У меня есть это в моем шаблоне:

Когда я запускаю этот тест, я получаю следующую ошибку:

Я нашел правильное решение для своей проблемы, используйте элемент ngDefaultControl input, вот так:

Этот атрибут дает тесту необходимые знания, чтобы он мог идентифицировать этот элемент как a FormControl в компонентах сторонних производителей (как в моем случае). Добавление этого атрибута решает проблему.