Reputation: 1217
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)
Upvotes: 100
Views: 448935
Reputation: 392
This is the method I like to use. The reason I prefer this method is that you can reference the input value in functions other than the one you've directly attached to the form, and you can also add validators and pre-set values if you wish:
import {
FormBuilder,
FormGroup,
Validators, FormsModule, ReactiveFormsModule
} from '@angular/forms';
@Component({
selector: 'test-app',
templateUrl: './test-app.component.html',
styleUrls: ['./test-app.component.scss']
})
export class SearchUsersComponent implements OnInit {
testForm!: FormGroup;
constructor(
private formBuilder: FormBuilder,
) {}
async ngOnInit(): Promise < void > {
this.testForm = this.formBuilder.group({
input1: "",
input2: "",
});
this.testForm.controls['input1'].setValue("test1"); //here you can preset values if you wish.
}
submitForm() {
console.log(this.testForm.get('input1')?.value)
console.log(this.testForm.get('input2')?.value)
}
}
<div [formGroup]="testForm">
<mat-form-field appearance="fill" floatLabel="never">
<input matInput placeholder="First Input" formControlName="input1" />
</mat-form-field>
<mat-form-field appearance="fill" floatLabel="never">
<input matInput placeholder="First Input" formControlName="input2" />
</mat-form-field>
<div>
<button mat-flat-button class="btn-small" (click)="submitForm()"> </button>
</div>
</div>
Upvotes: 0
Reputation: 1565
In Angular 11, if you have your template set up so that you have a form
tag which contains the input
tag and there also exists a button
that you can click, the following code shows how to alert the input
tag's value via two-way data binding:
app.component.html
:
<form>
<input [(ngModel)]="example" name="example">
<button (click)="alert()">Alert</button>
</form>
app.component.ts
:
example: string;
alert() {
alert(this.example);
}
Note that the name
attribute in the template is required here, otherwise you'll get an error message in the developer console saying the following:
Error: If ngModel is used within a form tag, either the name attribute must be set or the form
control must be defined as 'standalone' in ngModelOptions.
Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
Upvotes: 3
Reputation: 266
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. LModules is the module file on our Angular files SaveSampleExams is the service file is one function method.
> this.service.SaveSampleExams(LModules).subscribe(
> (data) => {
> this.dataSaved = true;
> LearnersModules.txtValue = this.txtValue.value;
> });
Upvotes: 0
Reputation: 4601
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.
Upvotes: 6
Reputation: 1220
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);}
Upvotes: 7
Reputation: 5292
You can also use template reference variables
<form (submit)="onSubmit(player.value)">
<input #player placeholder="player name">
</form>
onSubmit(playerName: string) {
console.log(playerName)
}
Upvotes: 12
Reputation: 720
html
<input type="hidden" #fondovalor value="valores">
<button (click)="getFotoFondo()">Obtener</button>
ts
@ViewChild('fondovalor') fondovalor:ElementRef;
getFotoFondo(){
const valueInput = this.fondovalor.nativeElement.value
}
Upvotes: 22
Reputation: 3044
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);
}
}
Upvotes: 8
Reputation: 521
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;
}
Upvotes: 24
Reputation: 3362
<form (submit)="onSubmit()">
<input [(ngModel)]="playerName">
</form>
let playerName: string;
onSubmit() {
return this.playerName;
}
Upvotes: 92
Reputation: 1373
In HTML add
<input (keyup)="onKey($event)">
And in component Add
onKey(event) {const inputValue = event.target.value;}
Upvotes: 66