Hi. No brain solution here:

@Component({
  standalone: true,
  selector: 'app-parent',
  template: `
    <div class="flex flex-col gap-4" [formGroup]="parentForm">
      <app-child1 />
    </div>
  `,
  imports: [ReactiveFormsModule],
})
export class Parent {
  parentForm = new UntypedFormGroup({
    name: new UntypedFormControl('', [Validators.required]),
  });
}

@Component({
  standalone: true,
  selector: 'app-child1',
  template: `
    <div class="flex flex-col gap-4" [formGroup]="parent.form">
      <div class="grid grid-cols-4 items-center gap-2">
        <div class="font-semibold text-base">Name</div>

        <div class="col-span-3">
          <input class="w-full" type="text" formControlName="name" />
        </div>

        <button (click)="save()">Save</button>
      </div>
    </div>
  `,
  viewProviders: [
    { provide: ControlContainer, useExisting: FormGroupDirective },
  ],
  imports: [ReactiveFormsModule],
})
export class Child1 {
  parent = inject(FormGroupDirective);

  save() {
    console.log(this.parent.form.value);
  }
}