Angular 4 – reset form makes inserted model filled with null values in a view

Question

I would like to reset form after submitting. Respectively, my use-case is the following:

 1. Fill form (template-driven solution).
 2. Get model from form and with service pass it to the database.

     2.1. Add model to database
     2.2. Assign model to an array

 3. Update view by this updated array.

The problem is, that if I reset form after calling my service method, the data have sent to database are valid, but in client I am receiving null values – meaning that on refresh angular client (browser) the data are fully loaded without any error. On the other hand, if reset method is not included, all works fine, as expected – only the form not reset (logically).

I tried debugging my solution, more or less unsuccessfully. However, one thought occurred to me. In that service layer the asynchronous call is made, is it somehow possible that method for resetting form can bias parameter in middle of processing the request, the method addCrop?

Component

Injectable()
export class CropsComponent implements OnInit {
            
options$ : Observable<StyleModel[]>;
crop$;
documentTypes = ['Pdf','LaTeX'];
//used for binding in form
cropModel : CropModel;

constructor(private _styleService: StyleRepositoryService) { }
            
ngOnInit() {
  this._styleService.getCropOnChange().subscribe(crop => this.cropModel = crop);
  this.options$ = this._styleService.getStylesOnChange();
}
            
onSubmit(f:NgForm)
{
  if(f.valid){
  //calling service layer for storing this model in database
  this._styleService.addCrop(this.cropModel);
  //resetting form values
  f.reset();
  }
 }
}

Service

@Injectable()
export class StyleRepositoryService {

  /*
     [abbrev.]
  */

    addCrop(crop: CropModel){
        this.dataService.createCrop(crop).subscribe(data =>{
            //find style according to CropModel styleId. Style model include array of cropModels
            let stl = this.styles.find(p => p.styleId == data.styleId);
            //add this cropModel to found style
            stl.styleCrops.push(crop);

           //log inform me about added model with null values
            console.log(this.styles);

            //notify other components that styles array have updated.
            this.styles$.next(this.styles);
        })
    }

  /*
     [abbrev.]
  */

}

Service made request with success - model added to database. As I mentioned at the top. Is it possible that passed parameter crop can be intercept by reset form method even it has been passed? So that, when I am adding the model (parameter from addCrop method) to array model is null.

EDIT

addCrop method runs post request which return data – the back-end server returns same model as the one created in Angular. So, if I use returned data, view is properly changed. So to clarify the question. Can the reset form method change the value of the attribute crop in the addCrop method at half of its run?

  addCrop(crop: CropModel){
        this.dataService.createCrop(crop).subscribe(data =>{
            //find style according to CropModel styleId. Style model include array of cropModels
            let stl = this.styles.find(p => p.styleId == data.styleId);
            //add this cropModel to found style
            //instead using parameter crop, I used returned model from backend, data
            stl.styleCrops.push(data);

           //log inform me about added model with null values
            console.log(this.styles);

            //notify other components that styles array have updated.
            this.styles$.next(this.styles);
        })
    }

If you don't pass anything to the reset, it resets the form to an initial (empty/null) state. Try passing your values into the reset to reset the form with current values. — DeborahK
– DeborahK, Commented Feb 20, 2018 at 21:23
@DeborahK in reset method i tried pass new created model. Form is clearly reset. However, the problem is still there - still in view I am getting null values. The actual question is, can form reset method bias parameter in addCrop method? So that, that operation to database is performed, but as soon as subscription is made parameter in method is changed? — Arsiwaldi
– Arsiwaldi, Commented Feb 20, 2018 at 21:42
Looking at your code a little more closely, the flow is part of the problem. I assume that this.dataService.createCrop is an async operation? So the f.reset() is occurring before that operation is complete. Since you are sending out a notification when the operation is complete (this.styles$.next) you could move your reset logic into your subscribe. — DeborahK
– DeborahK, Commented Feb 20, 2018 at 21:58

Community · Accepted Answer · 2020-06-20 09:12:55Z

According to @DeborahK I found out two problems.

It´s important to realize how asynchronous calls are made. For me as novice in angular it was good point (credit to @DeborahK) which makes me better thinking about the flow in code.
But mainly problem was in passing argument. In onSubmit method I am passing reference type cropModel to service method addCrop. The problem is, that form is referencing same object - cropModel, because its binded. So If i reset the form, I set value (null values) for referenced object – in that case cropModel. And because method addCrop makes asynchronous call, cropModel could be set for null during that call.

The solution was simple. Intialize new object within values of attribute cropModel and pass it to method addCrop

solution

 onSubmit(f:NgForm)
  {
    if(f.valid){
      this._styleService.addCrop(new CropModel(this.cropModel.bottomMargin,
        this.cropModel.leftMargin,
         this.cropModel.rightMargin,
          this.cropModel.topMargin, 
          this.cropModel.styleId,
          this.cropModel.documentType));
      f.reset();
    }
  }

Collectives™ on Stack Overflow

Angular 4 – reset form makes inserted model filled with null values in a view

EDIT

1 Answer 1

solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

1 Answer 1

solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related