0

I have a parent component in which I am trying to disable a button if form in child component is not valid. I am using @ViewChildren decorator but its seems to be not working properly.

parent.component.html

<child-component *ngIf="nextPage && this.companyFormGroup.get('merchantType').value === 5"

                                           [formSubmit]="formSubmitSub()"

                                           [mccCodes]="mccCodes"

                                           (form)="getAdditionalFormValue($event)"

                                           [registerWithTerminal]="isRegisterTerminalPage" #searchPosQrForm>

    </child-component>

<button *ngIf="nextPage" (click)="formSubmit()" [disabled]="!PosqrForm.formGroup.valid">add</button>

parent.component.ts

@ViewChildren("searchPosQrForm")
public searchPosQrForm!: QueryList<ChildComponent>;

PosqrForm: ChildComponent;

 ngAfterViewInit(): void {
 this.searchPosQrForm.changes.subscribe((comps: 
  QueryList<ChildComponent>) => {

  this.PosqrForm = comps.first;

   })

}

In console I get the cannot read properties of undefined (reading "formGroup") error. I can not figure out what I am doing wrong.

dudu1234
  • 3
  • 4
  • `PosqrForm` is undefined while initial state, you can avoid the error message by modify `[disabled]="!PosqrForm.formGroup.valid"` to `[disabled]="!PosqrForm?.formGroup.valid"` – paranaaan Nov 10 '22 at 03:22

0 Answers0