How to check the validity of the form (child element) in the parent element?

Question

Angular

I need to perform an action on the parent element if the form is valid. I want to check validity through ".valid". The question is how to pass "customerForm" to the parent element to check its validity and perform the action?
customer-form.component.ts

export class CustomerFormComponent implements OnInit {

  //@Output() customerFrom: any;

  customerForm = this.fb.group({
    firstName: ['', Validators.compose([Validators.required, Validators.minLength(1)])],
    secondName: ['', Validators.compose([Validators.required])],
    lastName: [''],
    // telNumber: ['', [Validators.pattern('^(900|901)+[0-9]{8}')]],
    telNumber: [''],
    email: ['', Validators.compose([Validators.required])],
    address: this.fb.group({
      state: ['', Validators.compose([Validators.required])],
      city: ['', Validators.compose([Validators.required])],
      street: ['', Validators.compose([Validators.required])],
    }),
    comment: [''],
  });

cart..component.html

<app-customer-form></app-customer-form>
<button *ngIf="customerForm.valid" (click)="parseToJSONCartItems()" class="cart__json-btn">TO JSON</button>

Answer 1

Why do you need to transfer the entire form if you only need a sign of validity?

@Output() formValid = this.customerForm.statusChanges.pipe(map(() => this.customerForm.valid))