角度4-获取输入值

In HTML add

<input (keyup)="onKey($event)">

And in component Add

onKey(event) {const inputValue = event.target.value;}

<form (submit)="onSubmit()">
<input [(ngModel)]="playerName">
</form>


let playerName: string;
onSubmit() {
return this.playerName;
}

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

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

html

<input type="hidden" #fondovalor value="valores">
<button (click)="getFotoFondo()">Obtener</button>

ts

@ViewChild('fondovalor') fondovalor:ElementRef;


getFotoFondo(){
const valueInput = this.fondovalor.nativeElement.value
}

You can also use template reference variables

<form (submit)="onSubmit(player.value)">
<input #player placeholder="player name">
</form>

onSubmit(playerName: string) {
console.log(playerName)
}

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

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.

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

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}">

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>