CODEWITHSUNDEEP
angularangular-materialangular-reactive-forms
Tord Larsen
Tord Larsen

Reputation: 2840

How to get value from input box to method in Angular

I learn Angular and I have this html code that works when I press enter the method getBookById gets called

This is search-books.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

import { BookService } from '../Services/book.service'
import { BookItem } from '../Services/BookItem';

@Component({
  selector: 'app-add-contact',
  templateUrl: './search-books.component.html',
  styleUrls: ['./search-books.component.scss']

})

export class SearchBooksComponent {
  public name: string;
  public type: number;
  public number: number;

  private formBuilder: FormBuilder;
  private location: Location;

  bookItems: BookItem[];
  public bookGroup = new FormGroup({
        title: new FormControl(''),
        author: new FormControl(''),
        genre: new FormControl(''),
        price: new FormControl(''),
      });
  constructor(private bookService: BookService) {

  }

  /** GET all books from server. */
  getBookItems() {
    this.bookService.getBookItems().subscribe(bookItems => this.bookItems = bookItems);
  };

  /** GET book by id from server. */
  getBookById(value: string) {
    this.bookService.getBookItem(value).subscribe(bookItems => this.bookItems = bookItems);

  };


}

The problem is that (value: string) is always "" empty

Here is the search-books.component.html 

   <mat-card class="form-container" >
  <mat-card-header><mat-card-title>Search for books</mat-card-title></mat-card-header>
  <form [formGroup]="bookGroup" class="form-container">

    <mat-form-field>
      <input type="text" matInput placeholder="Title"  formControlName="title" #box (keyup.enter)="getBookById(box.value)"> <p>{{value}}</p>
    </mat-form-field>

    <mat-form-field>
      <input type="text" matInput placeholder="Author" formControlName="author" #box (keyup.enter)="getAutor(box.value)"> <p>{{value}}</p>
    </mat-form-field>

    <mat-form-field>
      <input type="text" matInput placeholder="Genre" formControlName="genre" #box (keyup.enter)="getGenre(box.value)"> <p>{{value}}</p>
    </mat-form-field>

    <mat-form-field>
      <input type="text" matInput placeholder="Price" formControlName="price" #box (keyup.enter)="getPrice(box.value)"> <p>{{value}}</p>
    </mat-form-field>

  </form>

</mat-card>



<mat-card *ngFor="let book of bookItems">

  <mat-card-header >
    <mat-card-title>{{book.title | titlecase}}</mat-card-title>
    <mat-card-subtitle>{{book.description}}</mat-card-subtitle>
    <mat-card-subtitle>{{book.author}}</mat-card-subtitle>
    <mat-card-subtitle>{{book.genre}}</mat-card-subtitle>
    <mat-card-subtitle>{{book.publish_date}}</mat-card-subtitle>
    <mat-card-subtitle>{{book.price}}</mat-card-subtitle>

  </mat-card-header>

</mat-card>

Upvotes: 0

Views: 925

Answers (5)

youri
youri

Reputation: 1160

As you are using formGroup you can get the value by doing this getBookById(bookGroup.value.title). So your input should be:

<input type="text" 
  matInput
  placeholder="Title" 
  formControlName="title"
  (keyup.enter)="getBookById(bookGroup.value.title)">

Reactive forms is maybe not necessary in this case but as you are learning, it is a good example. I invite you to read Angular documentation to understand how it is working.

Upvotes: 1

Ollpej
Ollpej

Reputation: 27

If you add a console.log() in getBookById() you'll see that it actually get passed.

Also the way you display the input value wont work and will alwats display blank. Change

{{value}}

to

{{box.value}}

You cant see the parameter to your TS function since that variable is only known to the function. Create a variable outside the function in the class and assign it the value when the function run, THEN you can see it in the html with {{yourVariableName}}

Here my console log works and prints out the value passed to the function:

<div [formGroup]="reactiveForm">
  <input type="text" placeholder="Title" formControlName="title" #box (keyup.enter)="getBookById(box.value)">
</div>

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ngforms';

  reactiveForm = new FormGroup({
    title: new FormControl(''),
  });

  getBookById(value: string){
    console.log(value);
  }

}

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18975

With your current code, you need only like this it worked, remove formControlName

<input type="text" placeholder="Title"  #box (keyup.enter)="getBookById(box.value)"> <p>{{value}}</p>

https://stackblitz.com/edit/angular-8dmmoe?file=src%2Fapp%2Fapp.component.html

I tried to reproduce in another form, it still worked

https://stackblitz.com/edit/angular-material-form-egq3zd?file=app/my-form/my-form.component.ts

Upvotes: 0

moha noorani
moha noorani

Reputation: 152

in html file

<input type="tel" [(ngModel)]="Code1" (keyup)="keytab($event)" />

and in ts file

  keytab(event) {
    event.target.value
  }

Upvotes: 0

schoolcoder
schoolcoder

Reputation: 1654

Instead of (keyup.enter)="getBookById(box.value)" you can use (keyup.enter)="getBookById($event.target.value)"

Need not to use the reactive form for your case.

Upvotes: 0

Related Questions