Ошибка: StaticInjectorError (DynamicTestModule) [FormControlName -> ControlContainer]: - PullRequest
0 голосов
/ 11 июля 2019

У меня есть динамический компонент ввода, который я построил, который работает нормально, но дает мне ад, пытаясь выполнить модульное тестирование.Кажется, проблема вращается вокруг использования:

this.form = <FormGroup>this.controlContainer.control;

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

Независимо от того, что я пытаюсь, я получаю вышеуказанную (в заголовке) ошибку.

Вот моя тестовая спецификация (в ней, вероятно, есть ненужный код, поскольку я пробовал несколько разных подходов без удачи:

import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {DynamicInputsComponent} from './dynamic-inputs.component';
import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
import {NgbModule} from "@ng-bootstrap/ng-bootstrap";

fdescribe('DynamicInputsComponent', () => {
    let component: DynamicInputsComponent;
    let fixture: ComponentFixture<DynamicInputsComponent>;
    const controls: any = {
        testControl: new FormControl({value: '', disabled: false}, []),
    };
    let thisForm = new FormGroup(controls);
    const formBuilder: FormBuilder = new FormBuilder();


    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [DynamicInputsComponent],
            imports: [ReactiveFormsModule, FormsModule, NgbModule],
            providers: [
                {provide: FormBuilder, useValue: formBuilder}
            ]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(DynamicInputsComponent);
        component = fixture.componentInstance;
        component.form = formBuilder.group({
            chain: ['chain', Validators.required],
            ip: [
                '',
                Validators.required
            ],
            action: ['action', Validators.required]
        });
        fixture.detectChanges();
    });

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

Вот мой компонент:

import {Component, Input, OnInit} from '@angular/core';
import {ControlContainer, FormControl, FormGroup} from '@angular/forms';

@Component({
    selector: 'app-dynamic-input',
    templateUrl: './dynamic-inputs.component.html',
    styleUrls: ['./dynamic-inputs.component.css']
})

export class DynamicInputsComponent implements OnInit {
    public form: FormGroup;
    @Input() fromData: FormControl;
    @Input() controlName: string; // formControlName for this element
    @Input() value: any; // Preset Value
    @Input() type: string = 'text'; // Preset Value
    @Input() id: string; // Add an id to the field, if no id provided controlName is used
    @Input() label: string = ''; // Label for element (all elements should have a label)
    @Input() editable: boolean = true; // Is the field currently editable or readonly
    @Input() required: boolean = false; // Is the field required
    @Input() locked: boolean = false; // if state = locked the lock icon shows up next to label
    @Input() labelColumnSize: string = 'col-lg-4'; // Column size for label
    @Input() inputColumnSize: string = 'col-lg-4'; // Column size for input
    @Input() maxlength: number; // Maximum number of characters
    @Input() pattern: string; // Regex pattern of allowed field content
    @Input() alt: string = 'Please input ' + this.label; // Alternative text for screen readers
    @Input() placeholder: string = ''; // Placeholder text shown before user input

    constructor(private controlContainer: ControlContainer) {}

    ngOnInit() {
        // Assign this.form to the FormGroup of it's parent
        this.form = <FormGroup>this.controlContainer.control;

        if(this.controlName) {
            if(this.form.get(this.controlName).value && Object.keys(this.form.get(this.controlName).value).length !== 0 ) {
                this.value = this.form.get(this.controlName).value;
            } else {
                this.form
                    .get(this.controlName)
                    .valueChanges
                    .subscribe(next => {
                        this.value = next;
                    });
            }
        } else {
            this.controlName = '';
        }

    }
}
...