iamguid / ngx-mf Goto Github PK
View Code? Open in Web Editor NEWBind your model types to angular FormGroup type
License: MIT License
Bind your model types to angular FormGroup type
License: MIT License
InferModeFromModel does not seem to infer nullability correctly. In the following example I would expect the FormControl derived from nonNullable to be FormControl<string>
instead of FormControl<string | null>
.
InferModeNonNullable on the other hand seems to change the type of nullable from FormControl<string | null>
to FormControl<string>
. I would expect InferModeNonNullable to only make testFg.controls.nullable non-optional instead.
it('NullTest', () => {
interface NullTest {
readonly nonNullable: string;
readonly nullable: string | null;
}
type TestForm = FormModel<NullTest, null, InferModeFromModel & InferModeNonNullable>;
// creation
const testFg: TestForm = new FormGroup<TestForm['controls']>({
nonNullable: new FormControl<string>('nonNullable'),
nullable: new FormControl<string | null>('')
});
// different form interactions that should work given the interface and form type
testFg.controls.nullable.reset(null);
const nullTest: NullTest = testFg.getRawValue();
testFg.reset({
nullable: null,
nonNullable: 'nonNullable'
})
});
I haven't found any working combination of infer modes that makes this example work the way I want it to i.e. non-nullable controls that are typed <string | null>
and <string>
respectively.
Hello!
Just wanted to thank you for your great tool - works great and now it's difficult to imagine how to use Forms without it :)
Thanks a lot!
I have the following type:
interface Foo {
a: {
b: { type: 'a', keyA: string } | { type: 'b', keyB: string }
}
}
type Form = FormModel<Foo, { a: { b: 'group' } }, InferModeRequired & InferModeNonNullable>['controls']
And the following code throws:
builder.nonNullable.group<Form>({
a: builder.nonNullable.group({
b: builder.nonNullable.group({
type: builder.nonNullable.control('a' as const),
keyA: builder.nonNullable.control('')
})
})
})
The code should work as one of the union types is define.
interface M {
id: string;
}
type MF = FormModel<M>;
function getMf(): MF {
return new FormGroup({
id: new FormControl<string|undefined>('a', {nonNullable: true})
});
}
error TS2322: Type 'FormGroup<{ id: FormControl<string | undefined>; }>' is not assignable to type 'FormGroup<FormModelInnerKeyofTraverse<M, "group", DefaultInferMode, { id: string | null; }>>'.
Types of property 'controls' are incompatible.
Type '{ id: FormControl<string | undefined>; }' is not assignable to type 'FormModelInnerKeyofTraverse<M, "group", DefaultInferMode, { id: string | null; }>'.
TS: 4.8.4
If one of the properties in your model is called "link" it will be typed as never instead of its actual type (for example string). Here is an isolated test that will show a type error when trying to create a FormGroup for BrokenForm:
it('linkTest', () => {
interface Working {
name: string;
}
interface Broken {
link: string;
}
type WorkingForm = FormModel<Working>;
type BrokenForm = FormModel<Broken>;
const wf = new FormGroup<WorkingForm['controls']>({name: new FormControl('Name')}); // works fine
const bf = new FormGroup<BrokenForm['controls']>({link: new FormControl('Link')}); // Type 'FormControl<string | null>' is not assignable to type 'never'
});`
My Model:
export interface Model {
foo: {
bar: string,
baz: string[],
}[],
}
The form group type I want:
interface ... {
foo: FormArray<{ bar: FormControl<string>, baz: FormArray<string> }>
}
This this possible with ngx-mf?
Hi,
I think I spotted another issue:
interface Model {
a: string;
}
type ModelFormNonRequired = FormModel<Model, null, InferModeFromModel>;
type ModelFormRequired = FormModel<Model, null, InferModeRequired & InferModeFromModel>;
const groupNonRequired = this.fb.group<ModelFormNonRequired['controls']>({ a: new FormControl('', { nonNullable: true }) });
const groupRequired = this.fb.group<ModelFormRequired['controls']>({ a: new FormControl('', { nonNullable: true }) });
const aNonRequired = groupRequired.value.a; // typeof a: string | undefined
const aRequired = groupRequired.value.a; // typeof a: string | undefined
Shouldn't the resulting type of aRequired
only be string
instead of string | undefined
?
Hi!
I've got the following issue:
interface Model {
a: string;
b: string;
}
// Works
type ModelForm1 = FormModel<Model>;
// Works
type ModelForm2 = FormModel<Model, { b: Replace<FormControl<number | null>> }>;
// "Works" by having an error that { c ... } does not satisfy the constraint.
type ModelForm3 = FormModel<Model, { c: Replace<FormControl<number | null>> }>;
// Works, no error
type ModelForm4 = FormModel<Model, { b: Replace<FormControl<number | null>>; c: Replace<FormControl<string | number>> }>;
As you can see, that ModelForm3
correctly shows an error, that c
does not satisfy the TAnnotation
constraint.
However, if you, like in ModelForm4
have another valid annotation in there, you can add any other without the type showing an error.
Unfortunately, my TS type voodoo is not good enough to spot the error myself and make a PR. I hope you have an idea, if that is fixable. :)
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.