각도 MaterializeCSS 입력이 중복 된 레이블

Question

Angular MaterializeCSS (https://krescruz.github.io/angular-materialize/)를 사용하여 양식을 만들려고하지만 레이블 및 입력이 겹쳐서 수정 방법을 찾지 못하는 것 같습니다. 내 코드는 아래에 내가 나의 양식은 설명서의 설명에 따라 입력 필드 태그에 싸여있다 :

<fieldset ng-class="{'form-group-has-focus': hasValueOrFocus()}"> 
     <input-field> 
     <label style="background-color:red;" for="sp_formfield_{{ ::field.name }}" ng-if="field.type != 'boolean'" title="{{::field.hint}}"> 
      <span class="field-decorations"> 
      <span ng-show="field.isMandatory()" style="padding-right: .25em" title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': field.mandatory_filled()}"></span> 
      <span title="{{ decoration.text }}" class="decoration {{ decoration.icon }}" ng-repeat="decoration in field.decorations"></span> 
      </span>{{ field.label }} 
     </label> 
     <span ng-switch="field.type" class="type-{{ field.type }} field-actual" ng-class="{'state-mandatory': field.mandatory, 'state-readonly': field.read_only, 'state-hidden': field.hidden}"> 
      <span ng-if="field.instructions" ng-bind-html="field.instructions"></span> 
      <span ng-switch-when="boolean"> 
      <label for="sp_formfield_{{ ::field.name }}" title="{{::field.hint}}"> 
       <input ng-false-value="'false'" ng-model="fieldValue" name="{{field.name}}" ng-true-value="'true'" type="checkbox" ng-model-options="{getterSetter: true}" ng-disabled="field.isReadonly()"></input> 
      <span>{{getCheckBoxPrice(field)}}</span> 
      </span> 

      <sp-choice-list field="field" options="field.choices" ng-switch-when="choice" glide-form="getGlideForm()"></sp-choice-list> 
      <sp-color-picker field="field" sn-change="fieldValue(newValue)" ng-switch-when="color" glide-form="getGlideForm()" sn-disabled="field.isReadonly()"></sp-color-picker> 
      <sp-css-editor sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="css" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-css-editor><span ng-switch-when="document_id">{{field.displayValue}}</span> 
      <sp-duration-element field="field" ng-model="fieldValue" ng-switch-when="glide_duration" ng-model-options="{getterSetter: true}"></sp-duration-element> 
      <input ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="email" autocomplete="off" name="{{field.name}}" id="sp_formfield_{{field.name}}" ng-disabled="field.isReadonly()"></input> 
      <sn-field-reference field="field" sn-change="fieldValue(newValue)" ng-switch-when="field_name" glide-form="getGlideForm()" sn-disabled="field.isReadonly()"></sn-field-reference> 
      <sn-field-list-element field="field" sn-change="fieldValue(newValue, displayValue)" ng-switch-when="field_list" glide-form="getGlideForm()" sn-disabled="field.isReadonly()"></sn-field-list-element> 
      <sp-date-picker field="field" ng-model="fieldValue" ng-switch-when="glide_date" ng-model-options="{getterSetter: true}" sn-disabled="field.isReadonly()"></sp-date-picker> 
      <sp-date-picker sn-include-time="true" field="field" ng-model="fieldValue" ng-switch-when="glide_date_time" ng-model-options="{getterSetter: true}" sn-disabled="field.isReadonly()"></sp-date-picker> 
      <sp-reference-element ref-table="formModel.table" ref-id="formModel.sys_id" field="field" ng-switch-when="glide_list" glide-form="getGlideForm()" sn-disabled="field.isReadonly()" record-values="getEncodedRecordValues()" sn-options="{multiple: true, placeholder: field.placeholder}" sn-select-width="100%"></sp-reference-element> 
      <sp-glyph-picker field="field" ng-switch-when="glyphicon" sn-disabled="field.isReadonly()"></sp-glyph-picker> 
      <sp-html-editor sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="xml" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-html-editor> 
      <sp-html-editor sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="html_template" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-html-editor> 
      <sp-script-editor sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="json" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-script-editor> 
      <input ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="masked" autocomplete="off" name="{{field.name}}" id="sp_formfield_{{field.name}}" type="password" ng-disabled="field.isReadonly()"></input> 
      <div ng-switch-when="multiple_choice" class="radio" ng-repeat="c in field.choices"> 
      <label for="sp_formfield_{{ ::field.name }}" tabindex="-1"> 
       <input role="radio" ng-model="fieldValue" name="{{field.name}}" ng-checked="field.value == c.value" type="radio" value="{{c.value}}" ng-model-options="{getterSetter: true}" aria-label="{{c.label}}" ng-disabled="field.isReadonly()"></input><span style="margin-left: 1em;">{{c.label}}</span> 
      </label> 
      </div> 
      <textarea sp-autosize="true" ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="multi_two_lines" name="{{field.name}}" ng-disabled="field.isReadonly()"></textarea> 
      <div ng-switch-when="numericscale" class="radio"> 
      <label for="sp_formfield_{{ ::field.name }}" ng-repeat="c in field.choices" tabindex="-1"> 
       <input role="radio" ng-model="fieldValue" name="{{field.name}}" ng-checked="field.value == c.value" type="radio" value="{{c.value}}" ng-model-options="{getterSetter: true}" aria-label="{{c.label}}" ng-disabled="field.isReadonly()"></input><span style="margin-right: 1rem;">{{c.label}}</span> 
      </label> 
      </div> 
      <input ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="password" autocomplete="off" name="{{field.name}}" id="sp_formfield_{{field.name}}" type="password" ng-disabled="field.isReadonly()"></input> 
      <sp-currency-element sn-blur="fieldValue(field.stagedValue)" field="field" sn-change="stagedValueChange()" ng-switch-when="price" glide-form="getGlideForm()" sn-disabled="field.isReadonly()"></sp-currency-element> 
      <sp-currency-element sn-blur="fieldValue(field.stagedValue)" field="field" sn-change="stagedValueChange()" ng-switch-when="currency" glide-form="getGlideForm()" sn-disabled="field.isReadonly()"></sp-currency-element> 
      <sp-code-mirror mode="properties" sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="properties" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-code-mirror> 
      <sp-reference-field ng-switch-when="reference" ng-class="{'field-has-reference': field.value != '', 'field-empty-reference': field.value == ''}"></sp-reference-field> 
      <sp-script-editor sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="script_server" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-script-editor> 
      <sp-script-editor sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="script" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-script-editor> 
      <sn-table-reference field="field" sn-change="fieldValue(newValue)" ng-switch-when="table_name" sn-disabled="field.isReadonly()"></sn-table-reference> 
      <textarea sp-autosize="true" ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="textarea" name="{{field.name}}" id="sp_formfield_{{field.name}}" ng-disabled="field.isReadonly()"></textarea> 
      <sp-tinymce-editor sn-blur="fieldValue(field.stagedValue)" ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="html" sn-disabled="field.isReadonly()" name="{{field.name}}" ng-model-options="{getterSetter: true}"></sp-tinymce-editor> 
      <sp-tinymce-editor sn-blur="fieldValue(field.stagedValue)" ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="translated_html" sn-disabled="field.isReadonly()" name="{{field.name}}" ng-model-options="{getterSetter: true}"></sp-tinymce-editor><span ng-switch-when="user_image"><img ng-if="field.displayValue" ng-src="{{field.displayValue}}" style="max-height: 128px; max-width: 128px;"></img><sn-image-uploader sys-id="{{formModel._attachmentGUID || formModel.sys_id}}" field-name="{{field.name}}" upload-message="Upload an image" on-delete="onImageDelete()" src="field.displayValue" on-upload="onImageUpload(thumbnail)" table-name="{{formModel.table}}" ng-if="!field.isReadonly()" read-only="field.isReadonly()"></sn-image-uploader></span> 
      <sp-widget ng-switch-when="widget" widget="field.widget" page="{g_form: getGlideForm(), field: field, fieldValue: fieldValue}"></sp-widget> 
      <sp-widget ng-switch-when="widget_value" widget="field.widget" page="{g_form: getGlideForm(), field: field, fieldValue: fieldValue}"></sp-widget> 
      <span ng-switch-default="true"> 
      <input ng-model="field.stagedValue" ng-change="stagedValueChange()" maxlength="{{field.max_length}}" autocomplete="off" name="{{field.name}}" id="sp_formfield_{{field.name}}" data-type="{{field.type}}" ng-if="!field.max_length || 256 &gt; field.max_length" ng-model-options="{allowInvalid: true}" ng-disabled="field.isReadonly()"></input> 
      <textarea sp-autosize="true" ng-model="field.stagedValue" ng-change="stagedValueChange()" name="{{field.name}}" id="sp_formfield_{{field.name}}" data-type="{{field.type}}" ng-if="field.max_length &gt;= 256" ng-model-options="{allowInvalid: true}" ng-disabled="field.isReadonly()"></textarea> 
      </span> 
      <p ng-bind-html="::field.help_text" ng-if="::field.help_text" title="{{::field.help_tag}}" class="help-block"></p> 
     </span> 
     <div ng-show="field.messages"> 
      <div class="wrapper-xs r m-t-xs" ng-repeat="message in field.messages" ng-class="{'bg-danger': message.type == 'error', 'bg-info': message.type == 'info'}">{{ message.message }}</div> 
     </div> 
     </input-field> 
    </fieldset> 

결과 형식은 다음과 같습니다 : 나는 여기에 무엇을 놓치고

?

감사합니다.

Answer 1

아마도 이것은 최선의 방법은 아니지만 나에게 효과적 일 수 있습니다. 폼의 각 입력에 포커스 이벤트를 트리거하는 코드를 작성했습니다. 나는 angular-materialize를 사용하지 않았지만 약간의 변화로 당신을 위해 일할 수도 있습니다.

// focus 
$('.input-field > input').each(function(index, el) { 
    $el = $(el); 
    if ($el.val() !== '') 
     $el.trigger('focus'); 
});