Я запускаю модульное тестирование, чтобы проверить, был ли компонент успешно создан, тест не пройден. Форма шаблона имеет флажки, автозаполнение и опцию выбора, и я привязал каждый элемент формы к классу, как показано ниже
test.spe c .ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestComponent } from './test.component';
import {FormsModule,ReactiveFormsModule} from "@angular/forms";
import {HttpClientTestingModule,HttpTestingController} from '@angular/common/http/testing';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatTooltipModule } from '@angular/material';
import { Feature } from '../_models/features';
import { ExcelService } from '../_services/excel.service';
import { By } from '@angular/platform-browser';
describe('ComponentCreate', () => {
let component: FnoproductsComponent;
let fixture: ComponentFixture<FnoproductsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports :[FormsModule, ReactiveFormsModule,HttpClientTestingModule,MatAutocompleteModule,MatTooltipModule],
declarations: [ TestComponent],
providers: [
ExcelService
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
fixture = TestBed.createComponent(FnoproductsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
компонент. html
<div class="row" [ngStyle]="{'width' : width}">
<div style="padding: 0px;width: 300px;">
<label class="col-md-12 col-form-label" matTooltip={{Tooltip}} for="name">Daemon</label>
</div>
<div style="padding: 0px;width: 300px;">
<form [formGroup]="daemonForm">
<select style="height:30px;" class="form-control col-md-12" (change)="updateDaemon()" formControlName="daemonControl">
<option *ngFor="let daemon of Daemon">{{daemon}}</option>
</select>
</form>
</div>
***And other form elements
component.ts
Daemon= ['XYZ','ABC','MNQ'];
constructor(
private http: HttpClient,
private fb: FormBuilder,
private excelService:ExcelService
) {}
ngOnInit() {
this.daemonForm = this.fb.group({
daemonControl: ["Xyz"]
});
}
Примечание для испытательного стенда в файле se c , Я импортировал модуль форм, но все еще вижу следующую ошибку,
<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
Error: formGroup expects a FormGroup instance. Please pass one in.
at Function.ReactiveErrors.missingFormException (./node_modules/@angular/forms/fesm5/forms.js?:1247:15)
at FormGroupDirective._checkFormPresent (./node_modules/@angular/forms/fesm5/forms.js?:4676:28)
at FormGroupDirective.ngOnChanges (./node_modules/@angular/forms/fesm5/forms.js?:4586:14)
at checkAndUpdateDirectiveInline (./node_modules/@angular/core/fesm5/core.js?:9537:19)
at checkAndUpdateNodeInline (./node_modules/@angular/core/fesm5/core.js?:10805:20)
at checkAndUpdateNode (./node_modules/@angular/core/fesm5/core.js?:10767:16)
at debugCheckAndUpdateNode (./node_modules/@angular/core/fesm5/core.js?:11400:38)
at debugCheckDirectivesFn (./node_modules/@angular/core/fesm5/core.js?:11360:13)
at Object.eval [as updateDirectives] (ng:///DynamicTestModule/FnoproductsComponent.ngfactory.js:2694:5)
at Object.debugUpdateDirectives [as updateDirectives] (./node_modules/@angular/core/fesm5/core.js?:11352:21)
Я посмотрел по следующей ссылке Уже ответил на вопрос , я добавил ngif к каждому элементу группы форм и сделал ngIf истинным внутри ngOnInit , Но это решило проблему