Karma Unit Testing for angular Forms gives the error “”

Question

I have following test case,

fit('When Address is not having any entry, the address field should be marked as Invalid', () => {
        component.basicBookFormGroup.patchValue({
            bookName: 'My Site Name',
            bookOrg: 'Organization',
            bookAddress: '',
        });
        fixture.detectChanges();
        const addressField: DebugElement = fixture.debugElement.query(By.css('#bookAddressTxtArea'));
        expect(addressField.nativeElement.Invalid).toBeTruthy();
    });

In the HTML address field is marked as required, so I am expecting the Invalid property should be true for the above.

<mat-form-field appearance="outline" class="full-width-input">
            <mat-label>{{translate.address}}</mat-label>
            <textarea id="bookAddressTxtArea" autocomplete="off" matInput placeholder="{{translate.address}}" formControlName="bookAddress"
                required></textarea>
        </mat-form-field>

However I get the following error :

Error: No value accessor for form control with unspecified name attribute
            at _throwError (node_modules/@angular/forms/fesm5/forms.js:2094:1)
            at setUpControl (node_modules/@angular/forms/fesm5/forms.js:2004:1)
            at FormControlDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormControlDirective.ngOnChanges (node_modules/@angular/forms/fesm5/forms.js:4951:1)
            at checkAndUpdateDirectiveInline (node_modules/@angular/core/fesm5/core.js:20661:1)
            at checkAndUpdateNodeInline (node_modules/@angular/core/fesm5/core.js:21929:1)
            at checkAndUpdateNode (node_modules/@angular/core/fesm5/core.js:21891:1)
            at debugCheckAndUpdateNode (node_modules/@angular/core/fesm5/core.js:22525:1)
            at debugCheckDirectivesFn (node_modules/@angular/core/fesm5/core.js:22485:1)

I tried adding name property to address field , no luck

Answer 1

在测试类中导入MatFormFieldModule将起作用。