I would like to know how to get the value from an input on angular 4. I looked over the documentation on angular and the example with the key event doesn't work very well for me and I can't find a proper example how to do this so please help me out
The problem: I try to read the input's value and after submiting the value to another component that will add the value to a select tag(e.g. send the name of the person to a list for a select tag)
This question is related to
angular
input
components
You can also use template reference variables
<form (submit)="onSubmit(player.value)">
<input #player placeholder="player name">
</form>
onSubmit(playerName: string) {
console.log(playerName)
}
HTML Component
<input type="text" [formControl]="txtValue">
TS Component
public txtValue = new FormControl('', { validators:[Validators.required] });
We can use this method to save using API. LearnersModules is the module file on our Angular files SaveSampleExams is the service file is one function method.
> this.service.SaveSampleExams(LearnersModules).subscribe(
> (data) => {
> this.dataSaved = true;
> LearnersModules.txtValue = this.txtValue.value;
> });
I think you were planning to use Angular template reference variable based on your html template.
// in html
<input #nameInput type="text" class="form-control" placeholder=''/>
// in add-player.ts file
import { OnInit, ViewChild, ElementRef } from '@angular/core';
export class AddPlayerComponent implements OnInit {
@ViewChild('nameInput') nameInput: ElementRef;
constructor() { }
ngOnInit() { }
addPlayer() {
// you can access the input value via the following syntax.
console.log('player name: ', this.nameInput.nativeElement.value);
}
}
You can use (keyup)
or (change)
events, see example below:
in HTML:
<input (keyup)="change($event)">
Or
<input (change)="change($event)">
in Component:
change(event) {console.log(event.target.value);}
html
<input type="hidden" #fondovalor value="valores">
<button (click)="getFotoFondo()">Obtener</button>
ts
@ViewChild('fondovalor') fondovalor:ElementRef;
getFotoFondo(){
const valueInput = this.fondovalor.nativeElement.value
}
If you dont want to use two way data binding. You can do this.
In HTML
<form (ngSubmit)="onSubmit($event)">
<input name="player" value="Name">
</form>
In component
onSubmit(event: any) {
return event.target.player.value;
}
If you want to read only one field value, I think, using the template reference variables is the easiest way
Template
<input #phone placeholder="phone number" />
<input type="button" value="Call" (click)="callPhone(phone.value)" />
**Component**
callPhone(phone): void
{
console.log(phone);
}
If you have a number of fields, using the reactive form one of the best ways.
In HTML add
<input (keyup)="onKey($event)">
And in component Add
onKey(event) {const inputValue = event.target.value;}
Source: Stackoverflow.com