gparlakov/forms-typed

Want types in your forms? Want to have nested forms? This is the place to be...

Forms Typed

Main project is ngx-forms-typed

See ngx-forms-typed Readme.md here

CHANGELOG

Contributing

Example app

An app that uses all features of ngx-forms-typed.

Build and run using

ngx ng build forms && ng serve

OR using 2 separate terminal windows ngx ng build forms -- --watch in a terminal and ngx ng serve in the second terminal window

Contributors ✨

Thanks goes to these wonderful people (emoji key):

kasyoumi 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

forms-typed's Issues

if form group has multiple array? how to add TypedArraysIn?

form = typedFormGroup<AddPriceRequest,TypedArraysIn<AddPriceRequest, 'prices'>>({
isProduct: typedFormControl(false, [Validators.required]),
movieId: typedFormControl("", [Validators.required]),
defaultPrice: typedFormControl(null, [Validators.required]),
durationInDays: typedFormControl(null, [Validators.required]),
defaultCountryId: typedFormControl(null, [Validators.required]),
prices: typedFormArray([typedFormControl()]),
prices2: typedFormArray([typedFormControl()]),
});

Hey, what do you think about that solution?

ngx-mf

Document the types

• JSDoc style comments on API, functions and types
• Readme.md
• Contributing.md

forms-utils: add the async validators up the chain

When using the forAllControlsIn and addValidatorsTo the async validators are not supported.

Add Tests for show-form-control component

Issue with touched untouched

focused

blurred and focused next input - still not touched

Add the Angular 2.4.0 using ngx-forms-typed example

For the initial release I used an example angular 2 app to test that ngx-forms-typed actually works with angular 2's forms with typescript 2.8

NPM page missing license

So your Github repo sidebar clearly identifies the package as MIT-licensed, but the NPM page sidebar lists the license as "none". You might want to look into that.

Support Ivy

We need to make sure that the dependency allows for angular 9 and beyond

Order the TypedArray types

export interface TypedFormArray<K extends Array<T> = any[], T = any> extends FormArray {

export interface TypedFormArray<T = any, K extends Array<T> = T[]> extends FormArray {
    valueChanges: Observable<K>;
    statusChanges: Observable<'VALID' | 'INVALID' | 'PENDING' | 'DISABLED'>;

    controls: Array<TypedFormControl<T>>;
  export interface TypedFormArray<K extends Array<T> = any[], T = any> extends For

 * c.patchValue(['s']) // expects string[]
 * c.patchValue(1) //  COMPILE TIME! type error!
 */
export function typedFormArray<K extends Array<T> = any[], T = any>(

export function typedFormArray<T = any, K extends Array<T> = any[]>(
    controls: Array<TypedFormControl<T>>,
    validatorOrOptions?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null,
    asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[] | null
): TypedFormArray<K, T> {

): TypedFormArray<T, K> {
    // tslint:disable-next-line: prefer-type-cast
    return new FormArray(controls, validatorOrOptions, asyncValidators) as any;
}

`FormGroup.getRawValue()` is still `any`

When I try to use FormGroup.getRawValue() it's still seen as an any type by VS Code and the compiler. Hopefully that's an easy fix?

A typed form array of typed from groups

I'm trying to create a typed form array of typed form groups. I have not found any related example. Is it possible to do so ?

My test :

form = typedFormGroup<PartyForm, TypedArraysIn<PartyForm, 'invitees'>>({
    event: typedFormControl(eventDefault()),
    invitees: typedFormArray<PersonContact[]>([
      typedFormGroup<PersonContact>({
        name: typedFormControl(),
        email: typedFormControl()
      })
    ])
  })
...

this.form.controls.invitees.at(0) // Return type is TypedFormControl<PersonContact>  and not TypedFromGroup<PersonContact> 

what if model has conditional properties?

assume the following:

interface Model {
 validFrom: string,
  validTo?: string
}

so i tried to do the following and ran into multiple issues i am not sure how to deal with, or rather what could be done about it for a proper solution?

interface Model {
  validFrom: string,
  validTo?: string
}

const factory = (initialModel: Model) => typedFormGroup<Model>({
  validFrom: typedFormControl(initialModel.validFrom),


  // does not work...?
  // validTo: typedFormControl(initialModel.validTo),

  // this works...
  validTo: typedFormControl<string | undefined>(initialModel.validTo),

});

const mfg = factory({validFrom: 'foo', validTo: 'bar'});

// getting error on controls.validTo, since it can be undefined???
combineLatest([mfg.controls.validFrom.valueChanges, mfg.controls.validTo.valueChanges]).pipe(
  //something...
).subscribe();

can you tell me if i am doing something wrong?

Migration to angular 14+

Hallo @gparlakov !

Can you upgrade your lib to support angular v14, v15, v16 and v17 separately?

We cannot migrate our project to latest version without your changes...

Make into npm package

NPM package that will

• let users type their forms
• let users visualize their forms on screen (not visible unless development)

Actions

• Create Angular library infrastructure
• Extract component to lib
• Extract forEachControlIn to lib
• Extract types to lib
• Add package info and release as 0.1.0 (or 1.0.0 ?)
• (Optional) Is there a more descriptive name than show-form-control ?

Think about typing for TS < 2.8

The conditional type feature was added in TS and we rely on it.
What can we do without that feature - surely we can still strong type some stuff?

Make npm package `ngx-show-form-component`

Incorrect README install instructions

In your README "Getting Started" section it says to use the command npm install --save-dev ngx-forms-typed, but the npm page sidebar says npm i ngx-forms-typed. I assume it's the latter, but you might want to get those in sync.

Allow for {disabled: true, value: T} in the FormControl values

npm package is not the production build

When doing a npm install of ngx-forms-typed I cannot use it in my angular app since it cant read the public api ts file. It seems like you published the dist folder of forms after you did a non production build. This seems to cause issues when importing your project. I did a test locally where I did a ng build forms --prod and published dist/forms to a local npm server i have. This resolved the issue. Can i request that you push a new prod build to npm? Please feel free to contact me with any questions

Support the full FormControl API

Support the AbstractFormControlOptions:

     validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, 
     asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null

Let the default form types be more generic

Let the type TypedFormControls be more generic - now it types any controls as TypedFormControl which disallows FormGroup-s FormArray-s

Test with TS 2.8

Types rely on the contditional types feature added in TS 2.8. Let's test that its so.

Add contributors page

• describe the two libs one repo setup (ngx-forms-typed and ngx-show-form-control)
• describe semantic-release master/rc for forms and master-sfc rc-sfc for show form control setup
• using angular standard commit

Correct Readme link for ngx-forms-typed

Now it links to wrong place
Also fix the main readme.md link to ngx-forms-typed readme

Adjustments to nested typedFormArray of typedFormGroups usage

Hi,

using:
"@angular/core": "~12.2.0"
"forms-typed": "0.0.0-development"

Found example where you instantiate form as an example for nested typedFormArray of typedFormGroups usage:

export interface PersonContact {
  name: string;
  email: string;
}

export interface PartyForm {
  invitees: PersonContact[];
  event: EventForm;
}

...
export class PartyFormComponent implements OnInit {
  form = typedFormGroup<PartyForm, TypedArraysIn<PartyForm, 'invitees'>>({
    event: typedFormControl({ disabled: true, value: eventDefault() }),
    invitees: typedFormArray([typedFormControl()]),
  });
...

The TypedFormControl with typedFormControl function is passed into "invitees" TypedFormArray, which is semantically incorrect as it should be a TypedFormGroup instance. Also in PersonContactComponent you extended ControlValueAccessorConnector which implements ControlValueAccessor to map typedFormControl into TypedFormGroup instance. That looks like a duct tape fix which could produce bugs as you need to override default Angular's form logic and its uses subscriptions. so i suggest another approach to have fewer overheads using FormsTyped lib and cover the specified case:

Firstly in PartyFormComponent pass typedFormGroup in typedFormArray

  form = typedFormGroup<PartyForm, TypedArraysIn<PartyForm, 'invitees'>>({
    event: typedFormControl({ disabled: true, value: eventDefault() }),
    invitees: typedFormArray([typedFormGroup<PersonContact>({
        email: typedFormControl(''),
        name: typedFormControl(''),
    }
    )]),
  });

Then rewrite PersonContactComponent to simple accept TypedFormControl and transform it in ngOnInit into TypedFormGroup

  @Input() personContactGroup:  TypedFormControl<PersonContact>;
  public form!: TypedFormGroup<PersonContact>;

  ngOnInit(): void {
    this.form = this.personContactGroup as TypedFormGroup<PersonContact>
  }

All works as expected and required less effort to set up with this approach.
@gparlakov What do you think?

Correct readme link for ngx-show-form-control

Also add a link in root readme.md

Examples

• Online example for single control / shallow form group
• Online example for nested form group
• We'd like to prove that a form within a form within a form example would also work
  Perhaps setup like TypedFormGroup with one of the properties being a TypedFormGroup with a property represented by a TypedFormControl
• Online example for deep nested form group with arrays and 3 levels deep
• Add all examples to the readme!