<div>
    <div class="form" [formGroup]="gceCredentialsForm">

        <div class="alert alert-danger" role="alert" *ngIf="credentials.errors && credentials.errors.json">
            <span class="glyphicon glyphicon-exclamation-sign"
                aria-hidden="true"></span> <span class="sr-only">Error:</span> The provided credentials are not valid JSON.
        </div>
        <!-- Credentials -->
        <div class="form-group is-empty"
         [ngClass]="{'has-error': '!credentials.valid'}">
            <label for="id_credentials" class="control-label">GCE Credentials</label>
            <textarea id="id_credentials" name="credentials" class="form-control input-md" formControlName="credentials" rows="12"></textarea>
            <span class="help-block"> Copy your GCE credentials json file into this field, or use the upload button above.</span>
            <span class="material-input"></span>
        </div>
    </div>
</div>

<div>
    <div class="form" [formGroup]="gceCredentialsForm">

        <!-- Credentials -->
        <div class="form-group full-width-container">
            <mat-form-field>
                <textarea matInput id="id_credentials" name="credentials" formControlName="credentials" placeholder="GCE Credentials as JSON" rows="12"></textarea>
                <mat-error *ngIf="credentials.errors && credentials.errors.json">The provided credentials are not valid JSON.</mat-error>
                <mat-hint>Copy your GCE credentials json file into this field, or use the upload button above.</mat-hint>
            </mat-form-field>
        </div>
    </div>
</div>

Switch GCE credentials editor to mat-form-field
Switch GCE credentials editor to mat-form-field
