Angular無法讀取未定義的屬性（讀取“patchValue”）

我有這個要測驗的組件，但我不斷收到以下錯誤訊息

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"
        
        (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();
    })

uj5u.com熱心網友回復：

我懷疑問題在于 formGroup 是一個 Input()，您需要先將其初始化為某個值。

標籤：

上一篇：多次呼叫Socket.io事件偵聽器（角度9）

下一篇：將材質ui集成到angularbazel專案中