Как получить значение из поля ввода для метода в Angular
Я изучаю 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>
Я использую Угловой материал
Проверьте мой ответ для рабочего примера. Обратите внимание, что в Angular (документация) есть 2 типа форм: Реактивные формы и Формы на основе шаблонов. Angular Material — это просто набор компонентов.
Ответы 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
Не работает, использую этот Угловой материал. Когда я нажимаю ввод, метод вызывается, но не со значениями поля ввода
Вы можете поставить всю свою форму под сомнение?
Вместо (keyup.enter) = "getBookById(box.value)" можно использовать (keyup.enter) = "getBookById($event.target.value)"
Не нужно использовать реактивную форму для вашего случая.
Если вы добавите console.info() в getBookById(), вы увидите, что он действительно передается.
Кроме того, способ отображения входного значения не будет работать и всегда будет отображаться пустым. Изменять
{{стоимость}}
to{{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.info(value);
}
}
в html-файле
<input type = "tel" [(ngModel)] = "Code1" (keyup) = "keytab($event)" />
а в тс файле
keytab(event) {
event.target.value
}
Поскольку вы используете formGroup, вы можете получить значение, сделав это getBookById(bookGroup.value.title). Таким образом, ваш ввод должен быть:
<input type = "text"
matInput
placeholder = "Title"
formControlName = "title"
(keyup.enter) = "getBookById(bookGroup.value.title)">
Реактивные формы, возможно, не нужны в этом случае, но, как вы понимаете, это хороший пример. Я приглашаю вас прочитать Угловая документация, чтобы понять, как это работает.
Вы используете
formControlили нет? Кажется, вы смешиваете использование 2.