angular - 如何从子组件获取输入以在我的表单中注册?
问题描述
问题作为文本
当我将一个包含在组件中的输入添加到我的角度表单时,该表单不会将该输入作为属于它的控件。这意味着 egNgForm.valid
是不可靠的,因为它不包含从组件添加的输入。
是什么阻止了这种情况,我能做些什么呢?
问题作为代码:
为什么以下测试失败,我该怎么办?
import { Component, ViewChild } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, NgForm } from '@angular/forms';
@Component({
selector: 'test-input',
template: `<input name="inComponent" ngModel="dummy" required>`
})
class TestInputComponent {
}
@Component({
template: `<form><input name="inForm" ngModel="dummy"><test-input></test-input></form>`
})
class TestFormComponent {
@ViewChild(NgForm)
form: NgForm;
}
fdescribe('Input in Form', () => {
let component: TestFormComponent;
let fixture: ComponentFixture<TestFormComponent>;
beforeEach(async (() => {
TestBed.configureTestingModule({
declarations: [TestFormComponent, TestInputComponent],
imports: [FormsModule]
})
.compileComponents();
}));
beforeEach(async () => {
fixture = TestBed.createComponent(TestFormComponent);
component = fixture.componentInstance;
await fixture.whenStable();
fixture.detectChanges();
});
it('form has all inputs', () => {
expect(Object.keys(component.form.controls).sort()).toEqual(['inComponent', 'inForm']);
});
});
解决方案
viewProviders
在你的 上使用TestInputComponent
,所以它告诉 Angular 你希望这个组件使用现有的NgForm
@Component({
selector: 'test-input',
template: `<input name="inComponent" ngModel="dummy" required>`,
viewProviders: [ { provide: ControlContainer, useExisting: NgForm }]
})
export class TestInputComponent implements OnInit {}
Stackblitz:https ://stackblitz.com/edit/angular-testing-kgwsca
推荐阅读
- javascript - 为什么我不能将变量名传递给 JS 函数?
- python - 使用decimal.Decimal从表达式输出多值?
- php - 更改页面后保持聊天打开
- python - * 在 python 中对 range() 有什么作用?
- python-3.x - Discord bot 不能在 Heroku 上使用 Python 运行
- here-api - HERE 路由 API:未找到卡车路线
- grails - 在使用字段 Grails 插件中添加字段
- android - 进入后台时失去活动
- amazon-s3 - 放大 GraphQL 错误“无法读取 null 的属性 'aws_appsync_region'”
- r - 更正 r 中的列值排序