I have a simple form, which has a few inputs which are populated from an AngularJs model.
Normally in the past I've use an active class on the labels that are associated with the input to move the text out of the input field. However when the page is rendered the active class is no longer there. Therefore the label is on top of the input text.
HTML Form
<div id="editModal" class="modal">
<div class="modal-content">
<h4>{{ 'Edit ' + academicYear.Name }}</h4>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="acaYearName" type="text" class="" ng-model="academicYear.Name" required>
<label for="acaYearName" class="active">Academic Year Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="startDate" type="text" class="date-picker"
ng-model="academicYear.StartDate" required>
<label for="startDate" class="active">Start Date</label>
</div>
<div class="input-field col s6">
<input id="endDate" type="text" class="date-picker" ng-model="academicYear.EndDate"
required>
<label for="endDate" class="active">End Date</label>
</div>
</div>
</div>
</div>
</div>
Does anyone know why the active css class is being removed from the HTML attribute, and how to fix it?