Question

我想知道如何从角度4的输入中获取值。我查看了有关角度的文档，关键事件的示例对我来说并不是很好，我找不到一个正确的例子如何做到这一点所以请帮帮我

问题：我尝试读取输入的值，然后将值提交给另一个将值添加到选择标记的组件（例如，将该人的姓名发送到选择标记的列表）

Answer 1

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

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

Answer 2

在HTML中添加

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

在组件添加

中

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

Answer 3

如果您不想使用双向数据绑定。你可以做到的。

在HTML

<form (ngSubmit)="onSubmit($event)">
   <input name="player" value="Name">
</form>

在组件中

onSubmit(event: any) {
   return event.target.player.value;
}

Answer 4

您可以使用(keyup)或(change)事件，请参见下面的示例：

在HTML中：

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

或

<input (change)="change($event)">

在组件中：

change(event) {console.log(event.target.value);}

Answer 5

html

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

ts

@ViewChild('fondovalor') fondovalor:ElementRef;

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

Answer 6

我认为您打算基于您的html模板使用Angular template reference variable。

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

Answer 7

如果您只想读取一个字段值，我认为使用模板引用变量是最简单的方法

模板

<input #phone placeholder="phone number" />

<input type="button" value="Call" (click)="callPhone(phone.value)" />

**Component** 
 
callPhone(phone): void 
{
  
console.log(phone);

}

如果您有许多字段，则使用反应形式是最好的方法之一。

Answer 8

您也可以使用template reference variables

import { Component } from '@angular/core';

@Component({
  selector: 'demo-datepicker-datesdisabled',
  templateUrl: './disable-dates.html'
})
export class DemoDatepickerDatesDisabledComponent {
  disabledDates = [
    new Date('2019-02-05'),
    new Date('2019-02-09')
  ];
}



<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker
           [datesDisabled]="disabledDates">
  </div>
  <div class="col-xs-12 col-12 col-md-4 form-group">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           bsDaterangepicker
           [datesDisabled]="disabledDates">
  </div>
</div>

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

Answer 9

HTML 组件

<块引用>

TS 组件

<块引用>

public txtValue = new FormControl('', {validators:[Validators.required] });

我们可以使用这种方法来保存使用 API。 LModules 是我们 Angular 文件中的模块文件 SaveSampleExams 是服务文件是一种功能方法。

>  this.service.SaveSampleExams(LModules).subscribe(
>             (data) => {
>               this.dataSaved = true;
>               LearnersModules.txtValue = this.txtValue.value; 
>              });

Answer 10

<form>
   <input #inputValue="ngModel" name="player" value={{Value}} (keyup.enter)="acceptInput(inputvalue)">
</form>


value:any; 
acceptInput(Input: any){ 
this.value=Input; 
}

Angular 4 - 获取输入值

10 个答案: