0

I just started using Angular Material. I copied a code from Official Material Input docs.

But, whenever I focus on the input, it hides when it floats.

Before Focus

After Focus

P.S. : It happens on every form field and input. Please Help Me.

Thank You

EDIT:

I have created a material module in which I import all the necessary modules related to material and then export it to app.module.ts

material.module.ts

...
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
...

const MaterialComponents = [
    ...
    MatFormFieldModule,
    MatInputModule,
    ...
];

@NgModule({
    imports: [ MaterialComponents ],
    exports : [ MaterialComponents ]
})

app.module.ts

...
import { MaterialModule } from './material/material.module';
import { FlexLayoutModule, MediaChange, MediaObserver } from "@angular/flex-layout";

@NgModule({
    declarations: [
        ...
        routingComponents,
    ],
    imports: [
        ...
        FormsModule,
        ReactiveFormsModule,
        ...

        /* Material Imports */
        MaterialModule,
        FlexLayoutModule,
        NgbModule,
    ],
    providers: [ Title ],
    bootstrap: [ AppComponent ]
})

home.component.html

<form class="form">
        <mat-form-field class="example-full-width" appearance="outline">
            <mat-label>Email</mat-label>
            <input matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher" placeholder="Ex. pat@example.com">
            <!-- <mat-hint>Errors appear instantly!</mat-hint> -->
            <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
                Please enter a valid email address
            </mat-error>
            <mat-error *ngIf="emailFormControl.hasError('required')">
                Email is <strong>required</strong>
            </mat-error>
        </mat-form-field>

        <button mat-raised-button color="accent">Save</button>
    </form>

It's just copied from Official Material Docs

Node version is @12.16.2

Angular version is @9.1.3

wh0am1
  • 1
  • 3
  • hard to help without showing code! did you add this to your app.module: import {MatInputModule} from '@angular/material/input'; – Lys May 13 '20 at 01:14
  • @Lys I have updated the question with required files. Please let me know if you need any other files. – wh0am1 May 13 '20 at 10:42
  • any error in your console, or css that is messing around with it? I just made a small app in stackblitz and all worked properly – Lys May 14 '20 at 02:40
  • Yes, There is a version mismatch warning. ``` Your global Angular CLI version (9.1.3) is greater than your local version (9.1.0). The local Angular CLI version is used. To disable this warning use "ng config -g cli.warnings.versionMismatch false". ``` Does it occur due to this warning? – wh0am1 May 14 '20 at 06:26
  • @Lys I updated my local angular version. But still, the problem persists. – wh0am1 May 14 '20 at 09:40

1 Answers1

0

Turns out. I wrote this due to horizontal overflow in toolbar

styles.css


* {
    overflow-x: hidden;
}

The Issue was solved after I removed the css property.

wh0am1
  • 1
  • 3