Deaktivieren von float für mdInput Textfeld

In einer Eckigen 4 (Material) app, ich habe ein Textfeld für die Suche. Wenn ich in dem Feld, ein zweites Feld angezeigt, in dem eingegeben text. Dieses neue Feld schwebt, als ich die Seite scrollen. Wie deaktiviere ich den floating-Verhalten?

Scheint es nicht zu sein Standardverhalten für ein Textfeld. Ich habe versucht md-no-float, aber das ist für den Platzhalter-text, den ich verstehen. Jemand schlug vor, die Einstellung eine leere value, also habe ich Hinzugefügt, aber das problem bleibt.

<md-input-container md-no-float style="width: 100%">
      <input mdInput formControlName="search" value="" placeholder="Search Terms" />
</md-input-container>
  • Ich bin mir nicht sicher, ob ich Folgen. Es gibt keine interpolation Recht. Die Sucheingabe wird eigentlich angezeigt/aktiviert radio-button und die nächste am nächsten tag die Ergebnisse in einer ngFor div.
  • Sie kann bedeuten, dass der Platzhalter? material.eckig.io/Komponenten/input/übersicht#Platzhalter
  • Können Sie ein plunkr für das problem ?
  • Ich habe Ihren code benutzt und versucht zu simulieren, was du gesagt hast, aber es sieht gut aus. Redest du über die "Such-Begriffe" wörtliche schweben über dem Eingabefeld nach der Eingabe etwas ?
  • Nein, es ist der text, den ich im Eingabefeld eingeben--nicht die Platzhalter-text. Ich bin nur so verwirrt. Es ist nicht standard-Verhalten, so dass ich versuche, herauszufinden, was es verursacht.
  • Ja das ist seltsam , können Sie bitte Sie Ihre "Suche" formControl ?
  • Hier ist das Formular-code... diese.form = diese._formBuild.die Gruppe({ name: [null, Prüfungen.erforderlich], Suche: ", })
  • Ich codiert, was Sie erwähnt, aber leider bin ich nicht in der Lage zu simulieren, das problem . Wenn möglich, geben Sie eine plunkr von deinem code, dann wäre es viel leichter zu diagnostizieren .
  • OK, ich bin ein idiot. es ist die Chrome-autofill-box aufspringen...
  • haha .. okay , bin Froh, dass Sie diagnostiziert es 😀

InformationsquelleAutor beachCode | 2017-09-26
  1. 11
    <md-input-container [floatPlaceholder]="'never'">

    dies half mir, mich zu verstecken, die schwimmende Platzhalter

    Edit: Da Eckig Material 6

    <mat-form-field floatPlaceholder="never">
    InformationsquelleAutor CodeNoob
  2. 11

    Als pro-version 6.4.5 von @Winkel/material2 können Sie Steuern, floating-Etiketten mit floatLabel input-Eigenschaft, wie Sie sehen können, in Ihre floating-label-Dokumentation.

    <mat-form-field [floatLabel]="'never'">
    • Etwas weniger gekünstelt wäre floatLabel="never"
    InformationsquelleAutor j3ff
  3. -1

    Es stellt sich heraus, es ist die Chrome autocomplete auftauchen.

    Wenn Sie hinzufügen autocomplete="off" sowohl für das Formular und das Eingabefeld, es wird gehen.

    InformationsquelleAutor beachCode
  4. -1

    Entfernen Sie einfach das Platzhalter-Attribut

    <input matInput placeholder="Input">

    zu

    <input matInput >
    InformationsquelleAutor FlyingTurtle
  5. -1

    Laut der jüngsten Dokumentation https://material.angular.io/components/form-field/overview#floating-label, es ist jetzt hideRequiredMarker

    <input matInput hideRequiredMarker placeholder="Email" required>
    InformationsquelleAutor Jay
Schreibe einen Kommentar