example-13.ts

@Component({
  selector: 'app-user-form',
  template: `
    <div>
      <label>First name</label> <input formControlName="firstName" required />
    </div>

    <div>
      <label>Last name</label> <input formControlName="lastName" required />
    </div>

    <app-email-address-input formControlName="emailAddress" required>
    </app-email-address-input>
  `,
  providers: [
    {
      provide: NG_CONTROL_ACCESSOR,
      useExisting: forwardRef(() => UserFormComponent),
      multi: true,
    },
    {
      provide: NG_CONTROL_CONTAINER_ACCESSOR,
      useExisting: forwardRef(() => UserFormComponent),
    },
  ],
})
export class UserFormComponent implements ControlContainerAccessor<FormGroup> {
  readonly control = new FormGroup({
    firstName: new FormControl('', {
      validators: Validators.required,
    }),
    lastName: new FormControl('', {
      validators: Validators.required,
    }),
    emailAddress: new FormControl('', {
      validators: [Validators.required],
    }),
  });
}