Get the value from the mat-input in angular material

Question

As im new to the angular. I just want to get the value from the mat-input I need to get the value from the angular mat-input. Can someone help me to do this. Thanks in advance

<div fxLayoutAlign= "center center" fxFlexFill class="main-div">
<mat-card fxFlex= "20">
    <mat-toolbar color="primary" c>Bonbloc Login</mat-toolbar>
    <form fxLayoutAlign="stretch" fxLayout = "column" class="login-form">
        <mat-form-field>
          <input matInput required [(ngModel)] = "email" placeholder="email Id">
          <mat-hint align="end">Min 5 characters</mat-hint>
        </mat-form-field>

        <mat-form-field>
          <input matInput required [(ngModel)] = "password" type="password" placeholder="password">
        </mat-form-field>
        <button mat-raised-button type="submit" (click) = "login()">Login</button>
        <h1>Hi {{email}} {{password}}</h1>
      </form>
</mat-card>

login() {
console.log(this.email, this.password)
};

Maybe this can help: https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback — zappee, Dec 02 '20 at 10:00

Krenom · Answer 1 · 2020-12-02T10:05:28.540

0

What part of it isn't working exactly? It looks as though it should be fine.

<input matInput required [(ngModel)]="email" placeholder="email Id">

Presumably you have a matching line in the .ts declaring an email field to bind to:

public email: string;

Or similar.

[(ngModel)] Is a two-way binding, meaning whatever you set email to programmatically will be put into the text box, and whatever the user puts into the text box will set email's value.

Your login() method should be able to see this...

public login(): void {
  console.log('Entered email:', this.email);
}

Edit: Example StackBlitz showing the basic binding working. Not using matInput, but that won't change the functionality.

edited Dec 02 '20 at 10:05

answered Dec 02 '20 at 08:18

Krenom

1,894
1
13
20

If i need to get the input from the input field itself. and i dont need to put value into the text box means what should i do..??? – Hari Haran Dec 02 '20 at 08:25
I have pasted the login code above. but it doesn't work – Hari Haran Dec 02 '20 at 08:27
I've added a StackBlitz showing the basic mechanism that you are attempting to use. – Krenom Dec 02 '20 at 10:05

Pavithra Muthusamy · Answer 2 · 2020-12-02T15:57:53.287

0

html

<input matInput required [(ngModel)]="email" [value]="email" placeholder="your email" (change)="valuechange($event)">

component.ts

private email : string = '';

  valuechange() {
    console.log(this.email);
  }

ng-model directive binds the value of HTML controls like input, select, text-area to a variable created in ts file. so it can be acted as two way binding

edited Dec 02 '20 at 15:57

answered Dec 02 '20 at 15:41

Pavithra Muthusamy

255
1
3
13

score 0 · Answer 3 · answered Jul 13 '21 at 22:20

Use the name also Something like

<mat-form-field appearance="fill">
    <form>
       <mat-label>Insert Anything</mat-label>
       <input type="text"  matInput [(ngModel)] ="oName" name="oName" >
       <mat-hint>Serie</mat-hint>
    </form>
</mat-form-field>

Get the value from the mat-input in angular material

3 Answers3