How pass input value as FormGroup in Angular 17+

I'm trying to use Signals Input in angular 17 to pass a specific form. In the older approach works fine:

@Component({
selector: 'app-user-data-create-update',
standalone: true,
imports: [ReactiveFormsModule, PanelModule, NgStyle],
templateUrl: './user-data-create-update.component.html',
styleUrl: './user-data-create-update.component.scss',
})
export class UserDataCreateUpdateComponent {
// Injects
private readonly formBuilder: FormBuilder = inject(FormBuilder);

// Inputs
@Input() form: Signal<FormGroup<any>>; //works fine
fontSize = input<string>('0.8rem'); //works fine

constructor() {
this.form = signal(
this.formBuilder.group({
createdDateTime: [''],
creatorXID: [''],
creatorPersonXID: [''],
creatorPersonEmail: [''],
updatedDateTime: [''],
updaterXID: [''],
updaterPersonXID: [''],
updaterPersonEmail: [''],
})
);
}
}


Calling component:

<app-user-data-create-update [form]="formGroupProgram"/>


However, I've already tried a lot of things to works with "new" Angular signals with FormGroup and didn't works.

Any idea?

Continue reading...