Angular Material，当值存在时禁用浮动标签

Question

基本上，当有值时，我想关闭md-floating 标签（就像角度材料中的动画占位符）。我在我的 CSS 中使用自动搜索做了类似的事情。

我说如果自动搜索的input 中有值关闭浮动标签。我无法让它与md-chips 一起工作。它在输入时工作，但是一旦选择了md-chip，浮动标签就会回来，因为我没有输入任何值（见下图）。但是存在一个筹码值，所以如果存在筹码值，我不想要浮动标签。

#parent-search-autocomplete{
    margin-bottom:0px;

  & > md-chips-wrap{
    & > md-input-container.md-input-has-value label:not(.md-no-float){
      display:none;
    }

  }
}

<form name="parentComponentForm">
<md-chips ng-model="$ctrl.selectedParent" md-autocomplete-snap
    md-transform-chip="$ctrl.transformChip($chip)"
    md-require-match="true"
    md-on-add="$ctrl.updateSelected($ctrl.selectedParent)"
    md-on-remove="$ctrl.updateSelected($ctrl.selectedParent)"
    md-max-chips="{{$ctrl.multiple ? 0 : 1}}">
    <md-autocomplete id="parent-search-autocomplete" flex required  md-input-name="parentComponentField" ng-disabled="$ctrl.disabled"
            md-input-minlength="2"
            md-input-maxlength="25"
            md-selected-item="$ctrl.newAsset.parentComponent"
            md-search-text="$ctrl.searchText"
            md-items="item in $ctrl.querySearch($ctrl.searchText)"
            md-item-text="item.display"
            md-floating-label="{{'PLACEHOLDER.PARENT-COMP-LOC' | translate}}"
            class="my-custom-input">
    <md-item-template>
        <span md-highlight-text="$ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
    </md-item-template>
    <div ng-messages="parentComponentForm.parentComponentField.$error" style="color:red">
        <div ng-message="required">You
        <b>must</b>
        have a parent component.</div>
    </div>
</md-autocomplete>

<md-chip-template>
    <span>
        <strong>{{$chip.display}}</strong>
    </span>
</md-chip-template>
</md-chips>
</form>

Answer 1

如果您使用的是最新版本的角材料，您可以使用 floatLabel="never"

请参阅 SO 中的答案： Angular Material, disable floating label when value present