angular - 具有名称的表单控件没有值访问器...用于垫选择控件
问题描述
我正在使用jasmine和karma对angular 6应用程序进行一些单元测试,以验证formGroup字段是否有效。我在使用 mat-select 控制时遇到问题。当我运行测试用例时,Karma 给我一个错误,说Error: No value accessor for form control with name: 'importId'
. 顺便说一句,该组件按我的预期工作得很好。
这是我的组件:
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
@Component({
selector: 'app-my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit {
modelForm: FormGroup;
imps;
constructor(
public dialogRef: MatDialogRef<MyComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.imps = data['imp'];
}
ngOnInit() {
this.modelForm = new FormGroup({
name: new FormControl(null, Validators.required),
importId: new FormControl(null, Validators.required),
});
}
}
我的 HTML 模板如下所示:
<mat-dialog-content>
<form [formGroup]="modelForm">
<mat-form-field>
<input matInput
placeholder="Name"
formControlName="name">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Source import"
formControlName="importId">
<mat-option *ngFor="let imp of imps" [value]="imp.uuid">
{{imp.label}}
</mat-option>
</mat-select>
</mat-form-field>
</form>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-raised-button color="primary" [disabled]="!modelForm.valid" (click)="someFakeFunction()">Create</button>
<button mat-raised-button (click)="dialogRef.close()">Cancel</button>
</mat-dialog-actions>
最后,这是我的单元测试:
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {MockMatDialogData, MockMatDialogRef} from '@testing/mock/material';
import {MyComponent} from './evaluation-wizard.component';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {NO_ERRORS_SCHEMA} from "@angular/core";
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MyComponent],
imports: [ReactiveFormsModule, FormsModule],
providers: [
{provide: MatDialogRef, useValue: MockMatDialogRef},
{provide: MAT_DIALOG_DATA, useClass: MockMatDialogData}
],
schemas: [NO_ERRORS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
component.ngOnInit();
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('Form validation', () => {
it('form invalid when empty ', function () {
expect(component.modelForm.valid).toBeFalsy();
});
it('name field validity ', () => {
let name = component.modelForm.controls['name'];
expect(name.valid).toBeFalsy();
let errors = {};
errors = name.errors || {};
expect(errors['required']).toBeTruthy();
name.setValue("test");
errors = name.errors || {};
expect(errors['required']).toBeTruthy();
});
});
});
我无法做到这一点,有什么建议我想念的吗?
解决方案
您没有在测试模块中导入材料模块。
所以mat-form-field
,mat-select
等只是被 Angular 视为未知元素(因为您通过使用 告诉它这样做NO_ERRORS_SCHEMA
)。
推荐阅读
- java - 如何对重试期间使用新的 InputStream 进行单元测试?
- c++ - VS2012 与 VS2019 的兼容性
- uart - STM32F4 UART HAL 驱动程序'将字符串保存在变量缓冲区中'
- jquery - 即使在 ASP.NET CORE MVC 上使用 CDN,Boostrap 过滤器表控件也无法正常工作
- excel - 如何比较两列,在 VBA 中从第 1 列中的值确定第 2 列的值,而不在第 2 列中添加公式
- reactjs - React 中的 OwlCarouse - 奇怪的行为
- python - 寻找一种干净的方式来实现时间增量(python)?
- python - Tensorflow 批量归一化向后兼容性
- python - Python BeautifulSoup 使用标签中的文本并存储为变量
- windows-10 - 更改任务栏右键单击python.exe窗口的名称