flatMap, mergeMap, switchMap, concatMap, which one !?

To concatenate(or chain) asynchronous tasks we can just use then method of Promise, as example from javascript document

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback)

What the Hell is ErrorStateMatcher

Why ain’t my mat-error pop up ?


Last day I was trying to build a custom validator for my Reactive Form, with a Angular Material Form field.
As a usual milk drinker I was totally copying the way of error handling depicted on Angular Material’s document, here it is


It looks like this
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>


A *ngIf to check the form control’s valid state, that’s simple obviously, but I just couldn’t get it to show up no matter how many balls I crammed into the damn form-field, ...got only two, actually.

I made a little test code on StackBlitz

See in the screenshot I just use a boolean variable to control the visibility of mat-error, and a button to set that variable.


Even in this simplest case, the mat-error never wake up to live.

I was going to punch this…


...Until this obssesive programmer guy with his blog saved my day.





https://obsessiveprogrammer.com/validating-confirmation-fields-in-angular-reactive-forms-with-angular-material/



What ErrorStateMatcher? no one said nothing about it…





Quote this paragraph in the blog:





“The errorStateMatcher directive is built in to Angular Material, and provides the ability to use a custom method to determine the validity of a <mat-form-field> form control, and allows access to the validity status of the parent to do so.”





What !? If you take a look back at Angular Material’s Form field overview, there is nothing mentioned about ErrorStateMatcher, even the word itself never shows up in the page.





It’s just an overview I know… I am a milk drinker.

Thanks to the obsessive programmer dude I implemented my LeastRequireErrorMatcher class which inherits ErrorStateMatcher.


It accepts an array of field names for its constructor, and check if at least one of these field controls has value, if not, return error object.

With binding the instance of LeastRequireErrorMatcher to mat-input, the expected error message finally emerged, HURRAH~!

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

TL;DR

Your test/spec, a single it block, spends a too damn long time to finish.

Increase the value of jasmineNodeOpts.defaultTimeoutInterval in protractor.conf.js

Or give it an additional arguments to specifically set timeout.

Request cancel by client

I've spent entire morning to find out which part of my server's code cause the console message below

POST /api/channels - - ms - -

This message indicates that this request has been cancelled at some point in its life cycle, since there is no elapsed time recorded.

It turns out I've been thinking in the wrong way, it's the client, not server, stupid... stupid...

Notes about using Promises

Record some pitfalls when using Promises

When it comes across circular-dependency

Refer to Circular Dependency in constructors and Dependency Injection

I have to quote this:

To find out which one it is, list all of the methods in your class B used by class A, and all the methods in your class B used by class A. The shorter of the two lists is your hidden Class C.

Share mocks between Protractor and Karma unit-test

TL;DR

Just follow this post:
Using Browserify To Enhance Your AngularJS Tests
And change all module in your test code to angular.mock.module, then it's good to go