FormBuilder Date problems in v.3

[strigefleur]

Is this a regression?

Yes

Description

Having the code like

interface TestDateModel {
  id: number;
  content: string;
  date: Date;
}
//...
const obj: TestDateModel = {
  id: 1,
  content: 'pew',
  date: new Date(),
};
const f = this.formBuilder.group(obj);

gives compiler error.

Commenting out the Date typed prop "helps".

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Error: src/app/components/test.component.ts:27:38 - error TS2345: Argument of type 'TestDateModel' is not assignable to parameter of type 'Controls<{ id: number; content: string; date: Date; }>'.
  Types of property 'date' are incompatible.
    Type 'Date' is missing the following properties from type 'FormGroup<Controls<Date>>': controls, value, valueChanges, touchChanges, and 77 more.

Please provide the environment you discovered this bug in

"@ngneat/reactive-forms": "^3.0.0",
"@angular/core": "~12.2.10",
"typescript": "~4.3.5",
"rxjs": "6.6.7",

Anything else?

Sorry, can't provide quick reproduction - StackBlitz still have @ngneat/reactive-forms v.2.0 cached.

Last version we used before 3.0 was ~1.7.3

Do you want to create a pull request?

No

[kbrilla]

this is not how You use form groups, it should be:

interface TestDateModel {
  id: number;
  content: string;
  date: Date;
}
//...
const obj: TestDateModel = {
  id: 1,
  content: 'pew',
  date: new Date(),
};
const f = this.fb.group({
  id: this.fb.control(obj.id),
  content: this.fb.control(obj.content),
  date: this.fb.control(obj.date)
});

https://angular.io/api/forms/FormBuilder#group
Basically, group() expect object with key-value pairs, where values are objects that extend AbstactControl: so FormControl, formArray, or FormControl. The same thing for FormArray, only FormControl take value of an object to initialize its state

[strigefleur]

Got the point, thanks.
Probably still useful to update readme section.

I used to do it like

const f = this.fb.group({
  id: [obj.id, [Validators...]],
});

but for some reason it failed recently - will check back.

[strigefleur]

1. id: [{ value: 123, disabled: true }, [Validators.required]],
2. someProp: [null, [Validators.required]],

Both cases no longer work. Am I missing syntax update?

[NetanelBasal]

@strigefleur As it states in the docs if you need to use a FormControl rather than a FormGroup when dealing with non-primitive types, you should explicitly set it as a FormControl.

interface TestDateModel {
  id: number;
  content: string;
  date: FormControl<Date>;
}

builder.group({
  id: 1,
  content: 'pew',
  date: builder.control(new Date()),
});