Coder Social home page Coder Social logo

ngx-mf's People

Contributors

iamguid avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

e-oz

ngx-mf's Issues

InferModeFromModel and InferModeNonNullable not working correctly

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.

Thank you!

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!

Use a union doesn't work as expected

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.

Can't make it work with nonNullable fields

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

String Property with name 'link' is typed as never

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' 
  });`

[QUESTION] Nested arrays support

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?

Values for InferModeRequired are still `type | undefined`

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?

Annotations are not type safe

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.