Angular/HTML: Different behavior of validator in template and in component class

I do not understand (I’m probably missing some background), why validator (e.g. required) behaves differently, when it is in template like this

<input type=”text” required />

and when it is in component class (reactive form) like this:

name: new FormControl(”, Validators.required),

I’m using bootstrap library for styling and the form has class=’was-validated’, so the browser interacts with combination was-validated :valid and was-validated :invalid. and that’s the problem, because when required is in template (first case), everything works fine (:valid is set), but in the second case this does not work.

And another question which is maybe related: When I create a custom validator and put it into HTML or at FormControl definition (this time it does not matter), this does not affect :valid at all.

Could anyone explain?