MatInput label overlay doesn't move out of the input box in angular form

Question

On some of my form fields the field label doesn't move up to top border of field when you start typing in the input box. It just sits there in the middle of the box, and the character you type overlay the label, as in example below. I saw some suggestion about reloading built in themes but no help there.

<form [formGroup]="bindingAuthorForm" (submit)="submit()">
      <div class="input-area">
        <div class="left-right-area">
          <div id="left-col">
            <mat-form-field class="form-field" appearance="outline">
              <mat-label>Binding Name</mat-label>
              <input matInput formControlName="bindingName" required #binding_name>
              <mat-error *ngIf="bindingAuthorForm.controls['bindingName'].hasError('pattern')">
                <span *ngIf="bindingAuthorForm.controls['bindingName'].errors['required']">This field is
                  mandatory.</span>
              </mat-error>
              <mat-error>
                <span *ngIf="bindingAuthorForm.controls['bindingName'].errors['pattern']">Lowercase letters, numbers and
                  underscore only.
                </span>
              </mat-error>
            </mat-form-field>
            <mat-form-field class="form-field" appearance="outline">
              <mat-label>Version</mat-label>
              <input matInput formControlName="version" required #version_number autocomplete="nope" >
              <mat-error *ngIf="bindingAuthorForm.controls['version'].hasError('pattern')">
                <span>Version must be Major.Minor.Patch style, e.g. '1.2.3'</span>
              </mat-error>
            </mat-form-field>
            <mat-form-field class="form-field" appearance="outline">
              <mat-label>Author</mat-label>
              <input matInput formControlName="authorName" required autocomplete="nope" >
              <mat-error *ngIf="bindingAuthorForm.controls['authorName'].hasError('required')">
                <span>Author Name is required. </span>
              </mat-error>
            </mat-form-field>
            <mat-form-field class="form-field" appearance="outline">
              <mat-label>Short Description</mat-label>
              <textarea matInput placeHolder="Description" formControlName="plainText"></textarea>
              <mat-error *ngIf="bindingAuthorForm.controls['plainText'].hasError('maxlength')">
                <span>The short description is limited to 140 characters. </span>
              </mat-error>
              <mat-error *ngIf="bindingAuthorForm.controls['plainText'].hasError('badTags')">
                <span>HTML tags, and '&'s aren't permitted here </span>
              </mat-error>
            </mat-form-field>
          </div>
          <div id="right-col">
            <div id="template-text">
              <app-template-text #template_text></app-template-text>
              <div class="template-text-footer">
                <mat-error *ngIf="template_text.isError && template_text.touched">{{template_text.errorString}}
                </mat-error>
                <div class="spacer"></div>
                <a class="hover-toggle" mat-stroked-button (click)="showAttributes()">Attributes <mat-icon>help
                  </mat-icon>
                </a>
                <a class="hover-toggle" mat-stroked-button>Bindings <mat-icon>help</mat-icon></a>                
              </div>
            </div>
          </div>
        </div>
 
        <!-- <div class="footer-area">-->
        <div class=template-errors><p>{{errorMessages}}</p></div>
        <!-- <span [ngClass]="bindingAuthorForm.controls.bindingType.hasError('required') ? 'mark-error' : ''"> Binding Type
          * </span> -->
        <mat-button-toggle-group class="toggle-group" formControlName="bindingType" #binding_type
          [(value)]="bindingTypestring">

          <mat-button-toggle value="Definitions">Definitions</mat-button-toggle>
          <mat-button-toggle value="Entitlements">Entitlements</mat-button-toggle>
          <mat-button-toggle value="Restrictions">Restrictions</mat-button-toggle>
          <mat-button-toggle value="Reps">Publisher Reps</mat-button-toggle>
          <mat-button-toggle value="Section">Section Header</mat-button-toggle>
          <mat-button-toggle value="Schedule">Schedule</mat-button-toggle>
          <mat-button-toggle value="Template">Template</mat-button-toggle>
          <mat-button-toggle value="Other">Other</mat-button-toggle>
        </mat-button-toggle-group>
        <div class="action_buttons">
          <button class="submit-button" [disabled]="formInvalid" mat-raised-button color="primary" type="submit">Post to
            Blockchain</button>
          <button class="cancel-button" mat-raised-button color="alert">Cancel</button>
        </div>
      </div>

    </form>

Answer 1

Try with floatLabel="auto" to force label to float on top while typing a value in input as below -

Version Version must be Major.Minor.Patch style, eg '1.2.3'