Angular form validation and bootstrap styles

Question

I'm quite new with Angular and i'm trying to create a registration form using Angular and Bootstrap 4.

The result i'd like is to use the styles of Bootstrap with the validation of Angular. More precisely, when validating the form, Angular applies styles (ng-valid, ng-invalid, etc.) in two different places: the input element and the form element.

Two questions:

1) As Bootstrap uses 'has-danger' and 'has-success' instead of 'ng-[in]valid', is it possible to configure angular to use these styles instead of the default one. Currently, i'm considering extending bootstrap by adding the angular styles (with @extend has-danger/success)

2) Angular applies the style to the input and form elements whereas bootstrap expects it on the form-group element. Is it possible to have angular put the style there instead of the input element (or both?)

I'm using reactive forms and i'd like to avoid things like (not tested):

<form>     <div class="form-group" [class.has-error]="!fg.get('username').valid" [class.has-success]="fg.get('username').valid">         <label>Username</label>         <input formControlName="username" type="text"/>     </div> </form> 

Is there a simple way (not too verbose) of achieving this?

Answer 1

If you're using SASS you can do the following with out needing to rewrite all the css.

.ng-touched.ng-invalid {   @extend .is-invalid; } 

Note: you'll need to be importing bootstrap as part of your SASS build instead of reference it directly.

If you're not using SASS it's pretty to install see here Angular CLI SASS options