Angular 无法读取未定义的属性（读取 'patchValue'）

Question

我想测试这个组件，但我不断收到以下错误消息

TypeError: 无法读取未定义的属性（读取 'patchValue'）

组件：

import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { IDivision } from "ClientApp/src/app/models/referencedata/division";
import { IRegion } from "ClientApp/src/app/models/referencedata/region";
import { ISalesForceTitle } from "ClientApp/src/app/models/referencedata/salesforcetitle";

@Component({
    selector:'sym-sales-patch', 
    templateUrl: './sales-patch.component.html'
})
export class SalesPatchComponent implements OnInit {
    
    @Input() submitted: boolean;
    @Input() canRemoveItems: boolean;

    @Input() formGroup: FormGroup;

    @Output() onDelete: EventEmitter<string> = new EventEmitter();

    constructor() {
    }

    ngOnInit(): void {
        debugger;
    }

    delete() {
        this.onDelete.emit();
    }
}

下面显示了 html 模板，其中包含它仍然抱怨的最少数据集

<p-fieldset [toggleable]="true" styleClass="p-mt-2">
    <p-header>
        {{formGroup.controls.patch.value}} 
        <i *ngIf="canRemoveItems === true" 
        title="Click here to remove the sales patch"
        class="p-m-1 fas fa-unlink sym-action"
        (click)="delete()"></i>
    </p-header>
</p-fieldset>

错误似乎源于调用以下内容，但我不知道我在测试中做错了什么

 {{formGroup.controls.patch.value}}

这是测试：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropdownModule } from 'primeng/dropdown';
import { FieldsetModule } from 'primeng/fieldset';
import { InputNumberModule } from 'primeng/inputnumber';
import { InputTextModule } from 'primeng/inputtext';
import { SalesPatchComponent } from './sales-patch.component';

describe('SalesPatchComponent - Isolated Tests', () => {
    
    let fixture: ComponentFixture<SalesPatchComponent>;
    let component: SalesPatchComponent;

    beforeEach(() => {

        TestBed.configureTestingModule({
            imports: [
                FormsModule,
                ReactiveFormsModule, 
                InputNumberModule, 
                DropdownModule,
                InputTextModule,
                FieldsetModule, 
                BrowserAnimationsModule
            ], 
            declarations: [SalesPatchComponent]
        }).compileComponents();

        fixture = TestBed.createComponent(SalesPatchComponent);
        component = fixture.componentInstance;
    });

    it('should create', () => {
        component.formGroup.patchValue({
           patch: 'Test Patch', 
           shortCode: 'AP123', 
           salesForceTitle: 1, 
           region: 1, 
           division: 1
        });
        fixture.detectChanges();
        expect(fixture).toBeTruthy();
    })

})

正如您在上面看到的，我也在尝试设置 fromGroup 值，使用的语法适用于我在另一个项目中的语法！

有什么办法可以让这个测试通过吗？

正如@SomeStudent 所说，我初始化了我传入的表单组，然后它大部分工作了。

    it('should create', () => {
        component.formGroup = formBuilder.group({
            patch: 'Test Patch', 
            shortCode: 7627, 
            salesForceTitle: 1, 
            region: 1, 
            division: 1
        });
        fixture.detectChanges();
        expect(fixture).toBeTruthy();
    })

Answer 1

我怀疑问题出在 formGroup 是一个 Input()，您需要先将其初始化。

Angular 无法读取未定义的属性（读取 'patchValue'）

Angular Cannot read properties of undefined (reading 'patchValue')

angular

angular-test