gpt4 book ai didi

Angular 单元测试 : Error: No value accessor for form control with name: 'phoneNumber'

转载 作者:行者123 更新时间:2023-12-02 02:46:35 24 4
gpt4 key购买 nike

在我的 Angular 组件中,我使用了作为表单一部分的第 3 方组件,简化的模板如下所示:

<form novalidate autofill="off" [formGroup]="addPhoneForm">
<div>
<int-phone-prefix [locale]="'en'" [defaultCountry]="'us'" formControlName="phoneNumber"></int-phone-prefix>
</div>
<div>
<input type="text"formControlName="phoneName">
</div>
</form>

一切都很好......直到为我的组件的方法编写测试的时候。我知道我需要模拟第 3 方组件以防止它提示该组件不是已知元素。我也不想不使用 [NO_ERRORS_SCHEMA],因为第 3 方组件是我的 FormGroup 的一部分。所以在我的测试文件中,我在设置测试套件之前添加了一个模拟,注意我如何将 formControlName 添加到模拟模板,如何将模拟添加到 declarations 数组以及我什至如何在我的 providers 数组中使用 forwardRef 以便模拟将被视为我的表单的一部分....

// Mock Component
@Component({
template: '<input type="text" formControlName="phoneNumber">',
// tslint:disable-next-line
selector: 'int-phone-prefix',
})
class IntPhonePrefixComponent {
constructor() { }
}

describe('AddPhoneComponent', () => {
let component: AddPhoneComponent;
let fixture: ComponentFixture<AddPhoneComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AddPhoneComponent, IntPhonePrefixComponent],
imports: [
FormsModule,
ReactiveFormsModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => IntPhonePrefixComponent),
}
]
})
.compileComponents();
}));

但是,尽管模拟并将其包含在我的提供程序数组和声明数组中,但我在运行测试套件时仍然会收到以下错误。

错误:名称为“phoneNumber”的表单控件没有值访问器

有人可以告诉我我做错了什么吗?

最佳答案

您的 providers 数组在错误的位置:int-phone-prefix 应该有 NG_VALUE_ACCESSOR,而不是测试模块本身。

最简单的解决方案是为 stub IntPhonePrefixComponent stub 所需的三个 ControlValueAccessor 方法(并移动 provide: NG_VALUE_ACCESSOR//etc. 片段到它的装饰器)。我并不是说它是最好的或最优雅的,可能不是。

关于 Angular 单元测试 : Error: No value accessor for form control with name: 'phoneNumber' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62693972/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com