Stack Overflow
Stack Overflow

Questions tagged [mat-input]

56 questions
17
votes
2 answers

How to put character limit on a mat Input?

I didn't find any mention of character limit in the docs. Seems like a very common requirement. How Can I add a 300 characters limit to this Textarea ? https://stackblitz.com/edit/angular-izbcey?file=app/input-overview-example.ts
dota2pro
  • 7,220
  • 7
  • 44
  • 79
13
votes
1 answer

Set default directive for all input in app

I use mat-form-field with custom css in order to change the be look like appearance="outline" directive. In Angular Material v 7.2.1 appearance="outline" was added to the mat-form-field options. How can I declare appearance="outline" as a default…
Stack Overflow
  • 2,416
  • 6
  • 23
  • 45
11
votes
2 answers

How to align mat-button with mat-input?

How can I get these two items to align properly? I am trying to get them perfectly aligned but adjusting the button height just makes the bottom have get further away from the bottom of the search input. I think its because the center of them are…
nsquires
  • 899
  • 2
  • 8
  • 20
5
votes
1 answer

placeholder loaction in mat-input

I'm using angular6 with angular material to create this neat website. I'm using a mat-form-field with mat-input so show a text input element with a placeholder text. the placeholder text position has two states. one! when the text input is empty and…
ufk
  • 30,912
  • 70
  • 235
  • 386
3
votes
0 answers

When I use mat-input and mat-field in same row, and add mat-chip, these 2 fields not remain in same line

I have two three input in the same row. The first two are mat-input, and the third one is mat-chip, all in same line. When I add mat-chip, this field goes down, and alignment from first two field does not remain same, in one line. my code is…
mayank
  • 31
  • 1
  • 6
3
votes
1 answer

Angular matInput

Angular formcontrol works on different matInput, they have the same formControlName but it does not work on the second one. Why is that it works on the first one and not on the second one ? Any idea ? whats the difference ? they are just the same…
user13094449
3
votes
2 answers

Set an image icon prior to mat-form-field control

I am a newbie to angular and building a sample application. I have a situation where I am loading a form from a angular data table. The form on load has attributes that are populated based on data from the database. For one of the fields in the…
svijay.aug12
  • 531
  • 3
  • 13
  • 32
2
votes
2 answers

Angular Material custom input validation message not showing with mat-stepper

I implemented custom control based on official guides using ControlValueAccessor: https://material.angular.io/guide/creating-a-custom-form-field-control https://blog.angular-university.io/angular-custom-form-controls/ The issue that validation…
Arti
  • 7,356
  • 12
  • 57
  • 122
2
votes
1 answer

Reusable Angular Material mat-chip-list input with email validation

I need a reusable mat-chip-list input, which knows the following: can type anything in the input, but only valid email addresses can be added to the chip list. If the input has an invalid email in it and user presses ENTER, COMMA or TAB, then the…
Szandra
  • 31
  • 4
2
votes
0 answers

Unable to copy text from disabled matInput on firefox

Issue Unable to copy text from disabled matInput on firefox. This works on Chrome and Safari. There are some discussions on this on Stackoverflow: Link 1 Link 2 Stackblitz HTML
…
stayingcool
  • 2,324
  • 1
  • 21
  • 24
2
votes
1 answer

Angular Material DatePicker's input shifts month and day after typing

I'm developing a app using Ionic 4/Angular 7 and Angular Material 7.2.1. The app uses brazilian date format DD/MM/YYYY. When I select the date with the datepicker itself the text in the input is fine. But, after type the date in the datepicker's (on…
Natanael
  • 1,326
  • 5
  • 17
  • 34
1
vote
2 answers

How to mask all characters except last 3 characters on a string display only

Hi I am working in Angular and in one of the field which is phone number ,I want to mask the string on HTML view only except the last 3 characters. How can I do that ? Example: - 1212121212 as XXXXXXX212 or *******212 Note: - Only in view I need to…
Optimist Rohit
  • 428
  • 6
  • 24
1
vote
0 answers

Angular Material input reusable - Type number

I'm trying to create a reusable matInput with controlValueAccessor. When I pass the type with @Input(), I got the good behavior but my data number is convert in string. I create a stackblitz https://stackblitz.com/edit/angular-ivy-fetwzt Open the…
Alan Choufa
  • 11
  • 1
1
vote
3 answers

add spacing between matPrefix and matInput

I want to add some spacing in between the matPrefix and matInput of mat-form-field in angular. How can I targed them in css? here's my code: .html: Username
MM1122
  • 23
  • 2
  • 6
1
vote
0 answers

Angular 11 - Mat-form-field mat-input in standard format, the line which is supposed to be on the bottom is coming in center until reloaded

In the application where ever I had to use mat-form-field with mat-input it worked absolutely fine with outline appearance. There is a little distortion with standard appearance as the line that's supposed to be on the bottom of the span is coming…
Maneesha Kakani
  • 11
  • 2
1
2 3 4