Ngx-formly: async loading model

[enricooliva]

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ x] support request

Current behavior

 ngOnInit() {    
    this.route.params.subscribe(params => {
        this.service.getConvenzioneById(params['id']).subscribe((data) => {
          this.model = data;
        });
    });
}

When the model is populated for the first time all the field.formControl.valueChanges emit the event.

How to avoid to listen the first event?

[aitboudad]

the easy way is to avoid init the form until model is ready, using

<formly-form *ngIf`

[enricooliva]

I used:
<formly-form *ngIf="model"
and in my template
lifecycle: { onInit: (form, field) => { field.formControl.valueChanges.pipe( distinctUntilChanged(), takeUntil(this.onDestroy$), tap(selectedField => {

• onInit is called only with field has value
• valueChanges is called only after a user modification
  Seems working well.

Drawback is a completely empty page until it arrives the model
I'm not satisfy 100% seems the form + model need to be provided at the same time.

[enricooliva]

@aitboudad I have problem in reloading form.

[aitboudad]

I'm going to close since it's not clear, please elaborate to get an answer.

[enricooliva]

@aitboudad you are right. Thank you for your response.

I have this button with this disabled condition: !form.valid || !form.dirty
<button class="btn btn-outline-primary border-0 rounded-0" [disabled]="!form.valid || !form.dirty" (click)="onSubmit()" >
<form *ngIf='model' [formGroup]="form" >

onReload (){
      this.model = null; 
      let id = this.model.id;
      this.service.getConvenzioneById(id).subscribe((data) => {                  
        this.model = data;            
      });
}

I call the onReload function.
The form remain in dirty state.

If I did this.form = new FormGroup({}); the form became not modified but it is disconnected from the button.

[aitboudad]

try with this.form.reset()

[enricooliva]

Hi @aitboudad the result of the form now is coerent. Thank you.

But the side effect is the form disappear during the update process. Any suggestion?

   this.model = null;
   this.service.updateConvenzione(tosubmit, tosubmit.id).subscribe(
        result => {
          this.form.reset();          
          this.isLoading = false;          
          this.id = result.id;
          this.model = result;                    
        },

[aitboudad]

ok instead of setting model to null rely on a locale variable (for example isLoading) to ignore emitted value during updateConvenzione and use options.resetModel() to update model value:

// field config
field.formControl.valueChanges.pipe(
  distinctUntilChanged(),
  takeUntil(this.onDestroy$), 
  filter(() => !this.isLoading),
  ...
)

// updateConvenzione
   this.service.updateConvenzione(tosubmit, tosubmit.id).subscribe(
        result => {
          this.id = result.id;
          this.options.resetModel(result);          
          this.isLoading = false;              
        },
  )

[enricooliva]

Ok great!
I have a valueChanges inside a formly template, how to pass the local variable isLoading inside the template or set it externally?

[aitboudad]

pass it through formState
https://formly.dev/examples/form-options/form-state

[enricooliva]

I like the solution with form-state.

I lost only one behavior in select

          {
            key: 'tipoemittenti_codice',
            type: 'select',
            className: "col-md-6",
            templateOptions: {
              options: [],
              valueProp: 'codice',
              labelProp: 'descrizione',
              label: 'Autorizzato da',
              required: true
            },
            lifecycle: {
              onInit: (form, field) => {
                field.templateOptions.options = [this.model.tipoemittente];
                this.service.getEmittenti().subscribe((data)=> {
                  field.templateOptions.options = data
                });
              }
            }

Using the *ngIf on model when start the onInit the model is populated and
the set field.templateOptions.options = [this.model.tipoemittente]; in the onInit
work well.

@aitboudad is better uselifecycle onChangeor registerform.get('dipartimemto_cd_dip').valueChanges.pipe( and control isLoading

[aitboudad]

register valueChanges and control isLoading

[rdev-software]

Any update ?

When i try to load model with
<ion-content *ngIf="loadedGame | async as game" padding>

Validation does not work

[aitboudad]

@rdev-software not sure what you mean, please elaborate in a new issue instead.

[rdev-software]

@aitboudad That if I have observable loadedGame and I want to async load it in parent in this case ion-content and place dynamic form inside and use loaded object game inside, validation does not work (and maybe other things as well as per this thread)

[aitboudad]

@rdev-software please replicate what you've done using our starter example https://stackblitz.com/edit/ngx-formly-ui-ionic in order to see what going wrong + fill a new issue.