У меня есть несколько дочерних компонентов, содержащих таблицу материалов с родительской формой (шаблонной), определенной в родительском компоненте. Все они работают нормально, и все они проходят модульное тестирование, за исключением одного, которое имеет поля ввода в нижнем колонтитуле таблицы. При запуске модульных тестов на этом я получаю NullInjectorError: Нет поставщика для NgForm! ошибка.
Это часть разметки, содержащая элементы управления, с которыми у Жасмин возникла проблема:
<ng-container matColumnDef="saturday">
<mat-header-cell *matHeaderCellDef>Saturday</mat-header-cell>
<mat-cell *matCellDef="let exception;let i = index;" class="hours">
<mat-form-field>
<input min=0 max=23.75 pattern="^(?!0\d)\d+(?:[.](?:25|5|75|0)0*)?$" required #today="ngModel" matInput [(ngModel)]="exception.hours['saturday']" (ngModelChange)="updateTimesheetEntry($event,today,'saturday')" (focus)="focused['saturday'][i]=true" (focusout)="focused['saturday'][i]=false" name="exception-saturday{{i}}">
<mat-error #total *ngIf="focused['saturday'][i]">{{getErrorText(today)}}</mat-error>
</mat-form-field>
</mat-cell>
<mat-footer-cell *matFooterCellDef class="hours">
<input type="hidden" max=23.75 name="saturdayTotal" #saturdaytotal="ngModel" [ngModel]="getTotals('saturday')">
<div *ngIf="saturdaytotal.invalid" class="error">
{{totalError}}
</div>
</mat-footer-cell>
</ng-container>
С содержимым mat-cell все в порядке - это просто ввод в нижний колонтитул, приводящий к сбою теста.
Вот файл spe c:
describe('AttendanceExceptionsComponent', () => {
let component: AttendanceExceptionsComponent; let fixture: ComponentFixture;
beforeEach (asyn c (() => {
TestBed.configureTestingModule({
imports: [AppMaterialModule, FormsModule, ReactiveFormsModule, NoopAnimationsModule],
declarations: [AttendanceExceptionsComponent],
providers:[
{provide : AttendanceService, useValue: { approved : of() } } ,
{provide : ExceptionService, useValue: { getExceptionTypes : () => { return of(); } } } ,
{provide : PanelService, useValue: {}},
{provide : NotificationService, useValue: {}},
{provide : StateService, useValue: {}},
],
schemas: [ NO_ERRORS_SCHEMA ]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AttendanceExceptionsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
Я пытался добавить NgForm к поставщикам
{provide : NgForm, useValue: <NgForm>{}},
Но затем я получаю еще одну ошибку: ngModel не может быть использован для регистрации элементов управления формы с родительской директивой formGroup. Попробуйте вместо этого использовать партнерскую директиву formGroup "formControlName".
Как я сказал, что все работает нормально, когда я запускаю ng serve, это просто тестирование, которое выдает эти ошибки, и я не могу обойти тесты, потому что он встроен в нашу сборку CI, поэтому я полностью застрял!