Угловой родительский контроль формы Bootstrap / CSS не применяется к дочернему компоненту

Question

Я создал автозаполнение дочернего компонента, который я использую в родительском.В родительском режиме при попытке применить проверку с помощью элемента управления формы Bootstrap он не применяется к этому дочернему компоненту - который представляет собой поле ввода со списком, хотя он применяется к другим элементам управления, которые не являются дочерними.

Дочерний компонент HTML:

<div class="searching">
  <input type="text" class="form-control"  (input)="getFilteredData(inputBox.value);" class="form-control"  [formControl]="inputBox">
  <div id="search" tabindex="0" >
    <ul class="suggestionList">
      <li  *ngFor="let result of filteredResults | async" (click)="onUserSelected(result)" >{{result[displayField1]}} | {{result[displayField2]}} {{result[displayField3]}}</li>
    </ul>
  </div>
</div>

Родительский компонент:

<app-auto-complete formControlName="requestorId" 
                     [ngClass]="{ 'is-invalid': submitted && 
                     requestorId.errors }"></app-auto-complete>
                  <div *ngIf="submitted && f.requestorId.errors" class="invalid-feedback">
                      <div *ngIf="f.requestorId.errors.required">Requestor ID is required</div>
                  </div>

Дочерний CSS:

.searching {
  width: inherit;
    position: relative;
}
      .searching input {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 30px;
      }
      .suggestionList {
        background-color: #fff;
        width: 100%;
        position: absolute;
        padding: 0;
        left: 0;
        z-index: 1000;
      }
      .suggestionList li {
        list-style-type: none;
        border: 1px solid #c5c5c5;
        cursor: pointer;
        left: 0;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 1em;
        text-align: left;
      }

Answer 1

Я имею в виду несколько обходных путей, поэтому надеюсь, что все поможет.

Как уже упоминалось в комментариях, добавьте в декоратор родительского компонента свойство 'encapsulation' (того же уровня, что и 'селектор' и тому подобное) с помощьюViewEncapsulation.None.Имейте в виду, что при таком подходе стили родительского компонента проникают во все приложение, поэтому будьте осторожны с этим, если только родительский селектор не будет действительно конкретным, например .my-specific-parent-selector-which-isnt-gonna-be-repeated

, используйте свойство @Input дочернего компонента, чтобыпередайте валидацию проверки и примените класс непосредственно в соответствии с переданным вводом.

добавьте селектор .parent-selector .is-invalid к родительскому элементу, а затем добавьте за ним ::ng-deep .parent-selector .is-invalid, чтобы этот конкретный стиль проникал в дочерние классы.Будьте осторожны, так как этот подход не рекомендуется, поэтому он может перестать работать в будущем (хотя и маловероятно)

Примечание: также обратите внимание, что вы применяете класс is-invalid к селектору ... если вы проверяете с помощью ChromeВ веб-браузере вы увидите, что этот селектор, как правило, отличается от того, где вы пытаетесь добавить свой класс ... так что, возможно, ваш лучший подход - использовать входные данные