Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Angular Material input not behaving as expected

See original GitHub issue

Describe the bug I have an Angular 10 application. When I try to implement Amplify, <input matInput> is not behaving as expected anymore.

To Reproduce

npm install @aws-amplify/ui-angular aws-amplify
Configure Amplify (does not really matter for this problem)
Use this HTML file

<amplify-authenticator *ngIf="authState !== 'signedin'" username-alias="email"></amplify-authenticator>
<mat-form-field>
    <mat-label>Value</mat-label>
    <input matInput type="text" [(ngModel)]="value">
</mat-form-field>

The inputs are not reactive anymore and the placeholder is overlapping with the content.

Expected behavior The placeholders should behave normally and animate just like the default Angular material inputs.

Screenshots Actual: Bildschirmfoto 2020-07-22 um 10 14 37

Expected: Bildschirmfoto 2020-07-22 um 10 15 14

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:11 (5 by maintainers)

Top GitHub Comments

2reactions

simonreitingercommented, Jul 22, 2020

Hey @jordanranz! I just created a dummy to reproduce it: https://github.com/simonreitinger/amplify-angular-dummy

1reaction

simonreitingercommented, Aug 10, 2020

@jordanranz - Any updates on this?

Top Results From Across the Web

Angular material input validation not working as expected

Try with (input)="validate($event)" instead of (keypress) . I think keypress is executed only when the focus switch on another element.

Input

This error is thrown when you attempt to set an input's type property to a value that isn't supported by the matInput directive....

Input field mouse click not working properly on tabs

There is a bug on the input fields when they are on a tab. Input fields on another tab then the default tab...

How to fix your Angular Material input field from being ...

An input field (using mdInput within an md-input-container ) I had in the app was not behaving at all like it should; users...

Angular mat-selection-list not working as expected with search ...

[Solved]-Angular mat-selection-list not working as expected with search input-angular.js ... You can simply expand your typesOfShoes string array to be an object ...