Write a general purpose Angular 2+ comments

As long as there is something in your website to show to users, there must be urgent of your users to comment on that something. This is always true for any content-providing website. After all, what's the good of a website if you can't dump any of your garbage opinions on its garbage content.

Why sanitize html context ?

Image this situation when you write a blogger, or a forum, or an online editor for 3 GODDAMN 研究紀錄簿s every month like this one, whatever.
If your editor supports only pure text that will be so lame, right? So basically what you need is an editor which enables users to input their colourful HTML encoded content.

Write Angular 2+ Custom Form Control

We use form to collect data from user and save it as an object, a record, or a document into backend data-storage.
In simple case like User profile, all we got are name, email, phone number, age, birthday ...etc., nothing more than a string, number, or date, there are already built-in html5 inputs to handle data of these certain types, and Angular 2+ also integrated them naturally, but how about data field of some more complicated type? or when the ordinary flat inputs can not satisfy my desire for a more splendid UI ?

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~!