Как получить значение из поля ввода в метод в Angular

Question

Я изучаю Angular, и у меня есть этот HTML-код, который работает, когда я нажимаю, введите метод getBookById вызывается

Это 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);

  };


}

Проблема в том, что (значение: строка) всегда "" пусто

Вот 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>

Answer 1

Поскольку вы используете formGroup, вы можете получить значение, выполнив getBookById(bookGroup.value.title). Таким образом, ваш вклад должен быть:

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

Реактивные формы, возможно, не нужны в этом случае, но, как вы учитесь, это хороший пример. Я приглашаю вас прочитать англоязычную документацию , чтобы понять, как она работает.

Answer 2

в html-файле

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

и в ts-файле

  keytab(event) {
    event.target.value
  }

Answer 3

Вместо (keyup.enter)="getBookById(box.value)" вы можете использовать (keyup.enter)="getBookById($event.target.value)"

Не нужно использовать реактивную форму для вашего случая.

Answer 4

Если вы добавите console.log () в getBookById (), вы увидите, что он действительно передан.

Также способ отображения входного значения не будет работать и всегда будет отображаться пустым. Измените

{{value}}

на

{{box.value}}

Вы не можете видеть параметр вашей функции TS, так как эта переменная известна только функции. Создайте переменную вне функции в классе и присвойте ей значение при запуске функции, ТОГДА вы можете увидеть ее в html с {{yourVariableName}}

Здесь мой консольный журнал работает и выводит значение, переданное функции:

<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);
  }

}

Answer 5

С вашим текущим кодом вам нужно только, чтобы это работало, удалите 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

Я пытался воспроизвести в другой форме, она все еще работала

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