image by: https://undraw.co

You have been assigned to create a form for accepting some new metadata, in the Angular application that you had built earlier. You have designed a beautiful form with some great styling and components using bootstrap, primeNG or may be the new bulma CSS.

One particular thing you were really proud of was, subscribing to an observable from a service and handling things reactively. So you had a nice observable that you have been happily subscribing to and handling the onSuccess and onError gracefully.

One sunny day, your boss came to you and asked you to auto save the forms, as users are filling it. You like the challenge and feel upto it. You found on stack overflow that you can subscribe to the valueChanges on the angular form. Good for you. You quickly copied the code and built something like the below, and called the same save method you used earlier. You noticed all the weird things around debounce, switchMap, pipe, and so on.

this.beautifulForm.valueChanges
  .pipe(
    debounceTime(1000),
    switchMap(formData => this.save(formData)),
    takeUntil(this.unsubscribe)
  )
  .subscribe(() => this.done());

Aha !! the compilation error wouldn’t go away, any which way you try to arrange subscribe, map, observable. The save method you had earlier returns void. It probably was just eating into the response of your beautifulService and doing it’s stuff. Ok, You realised that save needs to return an Observable. But how do you do that? At the back of your mind, something is saying Pipe, Pipe, Pipe... You went to your good buddy google and asked “observable from subscribe, may be with a pipe”. Hours later, you were more confused than before. You copied some stack overflow answers, and thought let me read about Pipes a little bit.

You figured a way to make this happen. You are now returning a new observable using the “of” from your original methods, and piped on the original result doing something like below. But, but.. How do you catch the errors in pipe? Go back to searching again, Oompa !! map and catchError to the rescue. Finally you manage it, here is how it looked. So much for just a few lines of code.

return result.pipe(
  map(() => this.onSaveSuccess()),
  catchError(() => this.onSaveError())
);protected onSaveSuccess(): Observable<string> {
  this.isSaving = false;
  return of('done');
}

protected onSaveError(): Observable<string> {
  this.messageService.showError('blah blah..');
  return of('error');
}

You fired up your browser and tested it, only to realise the valueChanges have not fired unless you hit “enter” on the input fields. Bummer. Your navigator (google) was there to help again, who said that @ AngularExpert wrote an answer for similar question on stack overflow. You did find a way to notice that form fields support “ updateOn: ‘blur’ ” option, made sense. Although you probably ain’t got time for what other values are possible for updateOn. Your beautiful form now looks like this.

beautifulForm = this.fb.group({
    fullName: ['', { validators: [Validators.required], updateOn: 'blur' }]
});

You tabbed away on your form fields.. and everything seemed to be fine. You noticed that if the field requires longer input, and would require your users to spend longer time to fill, just like this medium blog (text area?), the save will not happen until they move out of that field. This could mean they could potentially loose that data. You think, what sane person would write a long paragraph on a web browser. You push it under the carpet.

So what is the moral of the story?

Save yourself some time, try to program “deliberately”.

The story line remains the same regardless of what you are trying to do. As you gain more experience, you get better at these things. You become exceptional at writing code accidentally, possibly much much faster over time. You find a way to know which google link could have an answer for your question, and which stack overflow response would most likely work. You look at the votes, tick marks, comments, and you build a pattern. Just don’t leak your secret sauce to other developers and to stack overflow, will you?

No body really has got that much time to know everything ahead of time. There are hundreds of programming languages, millions of libraries/packages, and “I don’t know the magnitude” concepts, techniques out there. You “invest the time” when something comes up. Good luck.