Support Angular 9 about ng-bootstrap-form-validation

[ashismo]

Finally decided to change from the below code from

<div class="form-group col-12 col-md-6 col-lg-6">
 <label for="username"><small class="text-muted text-secondary">Username</small></label>
<div class="input-group">
     <span class="input-group-addon">
              <i class="fa fa-user"></i>
    </span>
    <input type="text" 
        formControlName="username"
       class="form-control" 
       name="username" 
       placeholder="Username" 
       autocomplete="off">
</div>
</div>

TO

<div class="form-group col-12 col-md-6 col-lg-6">
 <label for="username"><small class="text-muted text-secondary">Username</small></label>
    <input type="text" 
        formControlName="username"
       class="form-control **input-icon**" 
       name="username" 
       placeholder="Username" 
       autocomplete="off">
      <i class="fa fa-user **iconspan**"></i>
</div>

Removed the nested div. And need to be real careful before I use any third-party packages.

.iconspan {
  float: left;
  margin-left: -6px;
  margin-top: -37.8px;
  position: relative;
  z-index: 2;
  /* color: green; */
  /* color: #464a4c; */
  color: blue;
  padding: .65rem .75rem;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  background-color: #eceeef;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .25rem;
}

.input-icon {
  text-indent: 33px;
}

[peter-babjak-bb]

Yes, i found same behaviour too.

I tried to use

<bfv-messsages></bfv-messages>

tag but it didn't help me.
Validation function doesn't find my input.form-control element if i placed it deeper into the div.from-group.

I wrote an e-mail to developer, but i haven't recieved answer yet.

[ashismo]

Same problem here after upgrading angular 9. The validation message does not appear however, it highlights the field having an issue but it does not say if the field is required or it does not meet the minimum length. I have a heavy dependency on this component in my application. Please let me know if someone finds something.

[kingcody]

Version 9 is out and supports Angular V9! If you have any issues after upgrading let us know.

[giriprashaad]

@kingcody This is still an issue.

<div class="form-group"><div><input class="form-control"/></div></div>

doesnt show the error message after Angular upgrade to 9.

This issue happens To be more specific, if

 "angularCompilerOptions": {
    "enableIvy": true,
  }

turning off Ivy compiler shows the error messages correctly.

[pepe19000]

I have a same problem

[peter-babjak-bb]

is it solved?

[martinib77]

Same situation here.

What i found:

If the input is the first one inside form-group it works

<div class="form-group"><input class="form-control"/></div>

but if it has any other element, it doen't

<div class="form-group"><div><input class="form-control"/></div></div>

[kingcody]

I haven't been able to reproduce this issue. As long as <bfv-messages> is inside the .form-group I can manipulate where the messages show up.