How to have validatorFN for FormControl inside getFormControls() ? #82

andreElrico · 2019-07-24T06:51:01Z

I know there is getFormGroupControlOptions but this is validation for the entire formGroup right? (as indicated by (formGroup) => {} ) - FormGroup - level.

How can I use validation on a FormControl level?

Here in my stackblitz im using the same validatorFN validatorWithDeps in a normal angular way and inside getFormControls() the ngx-sub-form way. How can I yield the same results? For ngx-sub-form its undefined. (because of scoping ...)

STACKBLITZ

Steps to reproduce:

open browser-console
type stuff into top field ("Enter you email")
type stuff into field with "12345" in it.
For top field the validator can resolve the values. For ngx-sub-form it cant.

The text was updated successfully, but these errors were encountered:

maxime1992 · 2019-11-11T21:30:04Z

Hi @andreElrico,

I took some time this evening to investigate. Thanks for the stackblitz repro it helped a lot.

If you look into this comment: microsoft/TypeScript#1617 (comment)

You'll notice that:

The order of initialization is:

The base class initialized properties are initialized
The base class constructor runs
The derived class initialized properties are initialized
The derived class constructor runs

As of today, the creation of the formGroup is happening in the constructor and therefore, the getFormControls method from the sub class is called when the properties of the sub class are not initialized yet.

ngx-sub-form/projects/ngx-sub-form/src/lib/ngx-sub-form.component.ts

Lines 72 to 75 in 1956d25

    
           public formGroup: TypedFormGroup<FormInterface> = (new FormGroup( 
        
             this._getFormControls(), 
        
             this.getFormGroupControlOptions() as AbstractControlOptions, 
        
           ) as unknown) as TypedFormGroup<FormInterface>;

I'm working on a fix but I suspect it might be a (small) breaking change.

EDIT:

I've got the fix working just need to edit some tests

BREAKING CHANGE: If you have components that are extending one of the classes of ngx-sub-form AND that have an `ngOnInit` hook, they should call `super.ngOnInit()` This closes #82

maxime1992 · 2020-01-07T17:07:27Z

Small update that I forgot to post here: this is on hold as I've found a few annoying things in my fix 😓

CF #113 (comment)

alex87 · 2020-02-03T14:49:01Z

Hi @maxime1992 we are also facing a similar issue where we need to use validators that are not available until ngOnInit() is called.

It is quite a pressing issue for us and I was wondering if you have an estimation on when you might be able to resolve this?

If you don't have time we would be happy to help if you can explain the issues!

maxime1992 · 2020-02-03T15:43:32Z

Hi @alex87. As you can see here: #113, I've been working on a fix but unfortunately I was quite unhappy with the outcome as it'd mean:

We'd then have to think of calling super.ngOnInit() if overriding that hook in our components (and there's no way to make sure it's type safe for ex)
A lot of properties like formGroup, formGroupErrors, formGroupControls would not be available as soon as the class is created. Only after ngOnInit which IMO is very error prone especially for people who don't have strict null checks turned on...

So I'm not willing to ship this MR anymore and would like to come up with a better fix. If you refer to my previous comment, here's of the order of execution works: microsoft/TypeScript#1617 (comment)

It is quite a pressing issue for us and I was wondering if you have an estimation on when you might be able to resolve this?

No estimation as I'm not sure how to fix this properly. Do you have any idea? I'd gladly accept some help.

maxime1992 · 2020-02-03T15:45:02Z

☝️ Wooops, fail clicked. Reopened.

alex87 · 2020-03-10T14:23:45Z

Hi @maxime1992 sorry for the delay in getting back to you, got busy!

We found a workaround for this specific issue by applying validators in ngOnInit using the setValidators function on the formControls. Its not perfect but works around the issue for now.

Regarding your fix and calling super.ngOnInit() this already has to be done for ngx-sub-form no? https://github.com/cloudnc/ngx-sub-form#angular-hooks

We have a similar issue with other internal components and I've been thinking it might be possible to enforce in typescript by adding some kind of decorator/tslint rule to the base function. Unless this gets solved soon: microsoft/TypeScript#21388

maxime1992 · 2020-04-23T09:36:45Z

Discussed with @zakhenry:

We will move the creation of the formGroup to ngOnInit

This is a major architecture change which is brought without any breaking change 😄! We've split up the code base in 2: Old one and new one. The old one hasn't moved at all but is now deprecated (not removed yet!). You can keep using the old one for a bit and have a smooth/incremental update to use the new API. Few changes that you have to note with the new API: - Only works with Angular 9 or more - The app needs to have Ivy activated (this is because we use `ɵmarkDirty` internally. If it ever gets removed we'll probably have to ask to provide the `ChangeDetectorRef` but we were able to around this for now!) - We got rid of inheritance 🙌 - Form errors on a FormArray are now an object instead of an array. Previously the array contained null values on all the fields without any error. It's now an object containing only the ones with errors and you can access them using the index Please start upgrading to the new API as soon as possible as we stop supporting the old API as of today and will remove it in a near release. This closes #171 for the major architectural changes and also the following issues as a result: - closes #82 - closes #86 - closes #93 - closes #133 - closes #143 - closes #144 - closes #149 - closes #160 - closes #168

maxime1992 · 2020-09-13T21:53:29Z

🎉 This issue has been resolved in version 5.2.0-feat-rewrite.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

This is a major architecture change which is brought without any breaking change 😄! We've split up the code base in 2: Old one and new one. The old one hasn't moved at all but is now deprecated (not removed yet!). You can keep using the old one for a bit and have a smooth/incremental update to use the new API. Few changes that you have to note with the new API: - Only works with Angular 9 or more - The app needs to have Ivy activated (this is because we use `ɵmarkDirty` internally. If it ever gets removed we'll probably have to ask to provide the `ChangeDetectorRef` but we were able to around this for now!) - We got rid of inheritance 🙌 - Form errors on a FormArray are now an object instead of an array. Previously the array contained null values on all the fields without any error. It's now an object containing only the ones with errors and you can access them using the index Please start upgrading to the new API as soon as possible as we stop supporting the old API as of today and will remove it in a near release. This closes #171 for the major architectural changes and also the following issues as a result: - closes #82 - closes #86 - closes #93 - closes #133 - closes #143 - closes #144 - closes #149 - closes #160 - closes #168

github-actions · 2021-11-21T21:46:44Z

🎉 This issue has been resolved in version 5.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

maxime1992 added the type: RFC/discussion/question This issue is about RFC, discussion or a question label Sep 1, 2019

maxime1992 self-assigned this Nov 12, 2019

maxime1992 mentioned this issue Nov 12, 2019

[DO NOT MERGE YET] fix(lib): access class props from get form controls #113

Closed

maxime1992 closed this as completed Feb 3, 2020

maxime1992 reopened this Feb 3, 2020

maxime1992 mentioned this issue Mar 28, 2020

Can I use injected dependencies in a hook? #160

Closed

This was referenced Apr 22, 2020

Revisit default values #168

Closed

No hook or observable member available to get latest form value after component initialised #86

Closed

maxime1992 mentioned this issue May 6, 2020

Major architecture changes coming #171

Closed

maxime1992 added the released on @feat-rewrite label Sep 13, 2020

maxime1992 closed this as completed in fef8cce Nov 21, 2021

github-actions bot added the released label Nov 21, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to have validatorFN for FormControl inside getFormControls() ? #82

How to have validatorFN for FormControl inside getFormControls() ? #82

andreElrico commented Jul 24, 2019 •

edited

Loading

maxime1992 commented Nov 11, 2019 •

edited

Loading

maxime1992 commented Jan 7, 2020

alex87 commented Feb 3, 2020

maxime1992 commented Feb 3, 2020 •

edited

Loading

maxime1992 commented Feb 3, 2020

alex87 commented Mar 10, 2020

maxime1992 commented Apr 23, 2020

maxime1992 commented Sep 13, 2020

github-actions bot commented Nov 21, 2021

How to have validatorFN for FormControl inside getFormControls() ? #82

How to have validatorFN for FormControl inside getFormControls() ? #82

Comments

andreElrico commented Jul 24, 2019 • edited Loading

maxime1992 commented Nov 11, 2019 • edited Loading

maxime1992 commented Jan 7, 2020

alex87 commented Feb 3, 2020

maxime1992 commented Feb 3, 2020 • edited Loading

maxime1992 commented Feb 3, 2020

alex87 commented Mar 10, 2020

maxime1992 commented Apr 23, 2020

maxime1992 commented Sep 13, 2020

github-actions bot commented Nov 21, 2021

andreElrico commented Jul 24, 2019 •

edited

Loading

maxime1992 commented Nov 11, 2019 •

edited

Loading

maxime1992 commented Feb 3, 2020 •

edited

Loading