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>
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: