Disable the form on NgOnInit doesn't disable formly

[luizfbicalho]

Description

export class AppComponent  implements OnInit{
  form = new FormGroup({});
  
  ngOnInit(){
    this.form.disable();
  }

Minimal Reproduction
If on init I disable the form, it doesn't work the disable.

https://stackblitz.com/edit/angular-fpuvb7

Your Environment

• Angular version: 7.2.16
• Formly version: 5.10.6

Additional context

[SubrahmanyaV]

1. Am facing the same problem with Angular version 10.1 & Formly Material 5.10.3
2. In my style sheet, I have the following;
   .disabled,
   [disabled] {
   color: mediumblue;
   }
   This has no effect on the fields disabled in Formly using field.templateOptions.disabled= true;

[luizfbicalho]

There was another issue that @aitboudad recomended the this.form.disable(); to disable the form.
do we need to use it in another way to disable on init?

[SubrahmanyaV]

Does this fix address the issue with the styling also ... here's the issue I had noticed earlier;
In my style sheet, I have the following;
.disabled,
[disabled] {
color: mediumblue;
}
This has no effect on the fields disabled in Formly using field.templateOptions.disabled= true;

[aitboudad]

@SubrahmanyaV there is no issue in styling, just make sure the defined [disabled] style is not overridden by the existing style.

[SubrahmanyaV]

@SubrahmanyaV there is no issue in styling, just make sure the defined [disabled] style is not overridden by the existing style.

• I upgraded to Formly/Material 5.10.6 (just before testing this)
• I have checked for style override, there is none... However the following style spec'ed in my .scss file 'does not work' (even when I spec 'important' against the style attribute);

.disabled,
[disabled] {
color: mediumblue !important;
}

Not sure if this info helps but I have two forms on the same page, one is an Angular Material 10 form & the second is the Formly/Material form. The color style is reflected in Angular form but not in Formly form.

Below is the snippet of code I am using to disable the Formly fields;
// --- Disable Document entry fields
this.documentFields.forEach(docField => {
docField.templateOptions.disabled = true;
});

Background: I fetch my Formly field definition from the database & subsequently disable all the fields with above code.

[aitboudad]

@SubrahmanyaV could you please provide a simple reproduction example using our stackblitz https://stackblitz.com/edit/ngx-formly-ui-material

[aitboudad]

This issue has been fixed and released as part of v5.10.7 release.

Please let us know, in case you are still encountering a similar issue/problem.
Thank you!

[SubrahmanyaV]

• I upgraded to v5.10.7 before testing this.
• The styling is still 'not working'.
• Description of the problem is exactly as I had narrated earlier.
  Looking forward to a resolution ...

[luizfbicalho]

I got the inverse problem now @aitboudad
Let me put some steps

1. I open the edit page, it shows me the form enabled
2. i close and open the details page, the form opens disabled
3. i close and open the edit again, the form opens disabled, but if I print the enabled property od the form, it's true

Seems to me that there is some cache from the previous component in the memory, it's strange, I have another issue when I change the item i'm editing, but I'll try to reproduce better

[aitboudad]

A reproduction is needed 🙏!

[luizfbicalho]

is it ok if I zip an example and attach it here?

[aitboudad]

ok

[luizfbicalho]

example.zip

To execute this you need this steps

1. npm install
2. run
3. go to url /complexidade
4. open one item on the grid with the pencil
5. open the same item with the eye
6. open the same item with the pencil (this will open disabled, but the Form is enabled)

On the side I have another issue, if you open one item, and you open another item, you will get an error from the kendo editor, I opened an issue in kendo but I coudn't solve it, they claim it's something about formly
I think it's related with this "cache" from last component

[luizfbicalho]

This means that you sucessfully ran the code I sent?

did you catch the two errors ? the disables one and the html editor one? I put them together because seems to be the same origin.

[aitboudad]

I'm not able to make it work due to the missing of @ngx-formly/agl-kendo package, I think its better to provide me a simple reproduction using stackblitz https://stackblitz.com/edit/ngx-formly-ui-bootstrap

For the editor error, probably the editor component doesn't support reactive-form, the solution is to rely on editor outputs to trigger formControl value changes:

<kendo-editor (onChange)="formControl.setValue($event)" ...></kendo-editor>

Note: onChange here is just an example, you may check the kendo doc to get the output name

[luizfbicalho]

the AGL-kendo is on the zip file, installed on the node_modules

the editor I opened an issue on kendo and it's ok for reactive forms

[aitboudad]

still getting some errors, a simple reproduction using https://stackblitz.com/edit/ngx-formly-ui-bootstrap is needed 🙏

[luizfbicalho]

I put the code on https://stackblitz.com/edit/angular-ivy-q3icdx?file=package.json
but for some reason it's not running there, I'm adding another zip here, or you can download the project from stackblitz

prject.zip

[aitboudad]

sorry but that took me much more time than I expected, feel free to reopen when you can provide a small reproduction example using stackblitz.com

[luizfbicalho]

@aitboudad I made it work, it's taking me much more time than I expected also

https://angular-ivy-q3icdx.stackblitz.io/#/complexidade

the css style is not working but you can see the problem

there are 3 different problems

1. id you edit one line and then edit another line, the kendo html editor shows an error
2. if you edit, then display the same line now it's making an error, on the third time it shows correctly the display
3. after error 2, if you came back to edit, it's only in display mode, doesn't came back to edit

But the errors rely on the fact that something from the last execution is on the component, I'm not sure what

https://stackblitz.com/edit/angular-ivy-q3icdx?file=package.json

I tested changing the html editor back to input to see the errors

the errors 1 and 2 dissapear, but the 3 remains the same

https://stackblitz.com/edit/angular-ivy-q3icdx?file=src%2Fapp%2Fconfiguracao%2Fcomplexidade%2Fcomplexidade.json line 22

Thanks for the help

[aitboudad]

The shared stackblitz is not working, contains two files only, make sure you've saved you work there

[luizfbicalho]

I tried to upload to stackblitz, it didn't work
I put it on github and sync to stackblitz but it doesnt save

the code is in this repo

https://github.com/luizfbicalho/angular-ivy-q3icdx/tree/master
I'll try to make stackblitz work later, but you can see it in this repo

There are a lot of kendo components on this project, grid, tree grid, html editor

[luizfbicalho]

Now it's working on stackblitz @aitboudad

https://stackblitz.com/edit/angular-ivy-fnrshf?file=src%2Fapp%2Fshared%2Ferror.handler.ts

https://angular-ivy-fnrshf.stackblitz.io/#/complexidade

[aitboudad]

Side note: when I'm asking for a minimal reproduction example, it doesn't mean you've to put your entire codebase as its time consuming for both of us.

[luizfbicalho]

Sorry but i couldn't reproduce It the other way
First I thought that this was an error on kendo, so to put the issue in telerik, I had to create an example, but the example didn't reproduce the issue, that's why I created this big example

[aitboudad]

I've reverted the initial commit which attempts to take account of form disabled state during the build step, so instead of that the solution is to disable the form using hooks #2379 (comment)

[luizfbicalho]

I changed to this and got this error

TypeError: Cannot set property model of [object Object] which has only a getter
at FormlyForm.ngOnChanges (ngx-formly-core.js:1132)
at FormlyForm.rememberChangeHistoryAndInvokeOnChangesHook (core.js:4542)
at callHook (core.js:4780)
at callHooks (core.js:4746)
at executeInitAndCheckHooks (core.js:4698)
at refreshView (core.js:9153)
at refreshComponent (core.js:10291)
at refreshChildComponents (core.js:8935)
at refreshView (core.js:9188)
at refreshEmbeddedViews (core.js:10245)

I'll update the stackblitz today

[luizfbicalho]

I found the reason @aitboudad

there is something about reading the JSON and loading the fields from it
if I use the SetFields = () => fieldsJson.fields
I get some errors
if I copy the json on the source as a typescript variable, it works, do you have any idea what can do that?

EDIT

Now I think that I got it, when I used the first json, formly injected some information on the json object with the fields, and on the next time there was some problems with the first injection.

is this a bug? is this the design? what do you think?
if it's the design, shouldn't have an validation to get if the fields are "dirty" and throw an error on formly initialization?

[aitboudad]

use immutable, if you don't want that behavior:

@NgModule({
  imports: [
    FormlyModule.forRoot({
      extras: { immutable: true }
    }),
  ],
})

Also to track the model value changes, use modelChange output:

<formly-form [model]="model" (modelChange)="modelChange($event)"` ...>

[luizfbicalho]

Thanks, this looks nice, I have three questions @aitboudad

1. Is there a pro/con to use this immutable?
2. Is there an example with all those extras?
3. why do I nees to track the modelChange? with immutable it looses the reactive?

[aitboudad]

1. Is there a pro/con to use this immutable?
2. why do I need to track the modelChange? with immutable it looses the reactive?

We try to not touch formly-form inputs and instead rely on formly-form outputs to get notified of changes, still experimental but we may use some parts of it as default in the future.

2. Is there an example with all those extras?

Check the source code https://github.com/ngx-formly/ngx-formly/blob/main/src/core/src/lib/models/config.ts#L55-L82

[SubrahmanyaV]

• I upgraded to v5.10.7 before testing this.
• The styling is still 'not working'.
• Description of the problem is exactly as I had narrated earlier.
  Looking forward to a resolution ...

Do you have an update on the styling issue, please let me know the version if it has been addressed, thanks.

[aitboudad]

@SubrahmanyaV could you please put a little effort to provide a reproduction (https://stackblitz.com/edit/ngx-formly-ui-material), it essential for me in order to gain some time, and thanks in advance for your understanding!