在Angular中,可以使用@Input()
装饰器将FormGroup
传递给组件。以下是一个示例解决方案:
在父组件中,定义一个FormGroup
并将其传递给子组件:
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
username: new FormControl('', Validators.required),
password: new FormControl('', Validators.required)
});
}
}
在子组件中,使用@Input()
装饰器接收FormGroup
:
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'app-child',
template: `
`
})
export class ChildComponent {
@Input() formGroup: FormGroup;
}
现在,我们可以在单元测试中使用TestBed
来测试子组件接收到的FormGroup
是否正确。以下是一个测试示例:
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ChildComponent } from './child.component';
import { FormGroup, FormControl, Validators } from '@angular/forms';
describe('ChildComponent', () => {
let component: ChildComponent;
let fixture: ComponentFixture;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ChildComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ChildComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should receive and display formGroup', () => {
const formGroup = new FormGroup({
username: new FormControl('', Validators.required),
password: new FormControl('', Validators.required)
});
component.formGroup = formGroup;
fixture.detectChanges();
const inputElements = fixture.nativeElement.querySelectorAll('input');
expect(inputElements.length).toBe(2);
expect(inputElements[0].value).toBe('');
expect(inputElements[1].value).toBe('');
});
});
在这个测试中,我们首先创建了一个FormGroup
并将其赋值给子组件的formGroup
属性。然后,我们使用fixture.nativeElement.querySelectorAll('input')
来获取子组件中的所有输入元素,并断言它们的数量及初始值是否正确。
通过这种方式,我们可以确保子组件成功接收到了父组件中传递的FormGroup
。