form select - angular validation classes not being propagated to the parent div

[will7742]

In angular 5 I'm using a custom validator that sets the select box formControl to invalid on form-load. If I select something in the select box, it properly sets the Select's class to ng-valid, but not it's parent div. This propagation is important since the select is set to hidden, I need the parent div to be accurate in order to style invalid fields. It also seems that ng-dirty is not being propagated up either.

Example Dom after I select an element:

<div class="select-wrapper initialized ng-untouched ng-pristine ng-invalid">
  <span class="caret">▼</span>
  <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-537deb8c-44f8-d56b-52e0-ddd06e4d2186" value="Workflow A">
  <ul id="select-options-537deb8c-44f8-d56b-52e0-ddd06e4d2186" class="dropdown-content select-dropdown ">
    <li class=""><span>Workflow A</span></li>
    <li class=""><span>Workflow B</span></li>
  </ul>
  <select _ngcontent-c10="" formcontrolname="workflowId" id="workflowId" materialize="material_select" ng-reflect-name="workflowId" class="initialized ng-untouched ng-dirty ng-valid" ng-reflect-materialize="material_select" ng-reflect-materialize-select-options="[object Object]">
    <!--bindings={
    "ng-reflect-ng-for-of": "[object Object],[object Object"
     }-->
    <option _ngcontent-c10="" value="4" ng-reflect-value="4">Workflow A</option>
    <option _ngcontent-c10="" value="5" ng-reflect-value="5">Workflow B</option>
  </select>
</div>