从角度 5 的输入文本字段中获取值答案

【问题标题】：Get value from Input text field in angular 5从角度 5 的输入文本字段中获取值
【发布时间】：2018-01-31 07:56:52
【问题描述】：

这似乎是一个简单的问题，但我发现没有什么对我有用。我的 component.html 中有一个标准输入字段：

<div class="form-group">
    <label>Serial</label>
    <input type="text" name="serial" id="serial" [ngModel]="serial" [value]="serial" class="form-control">
</div>

所以当用户现在提交表单时，我如何获得他在字段中输入的值？如果我在我的onSubmit() 函数中执行一个简单的console.log(this.serial)，我什么也得不到。我在 component.ts 中声明了 serial: String;

【问题讨论】：

标签： angular typescript mean-stack

【解决方案1】：

你有错误的界限。您需要 banana-in-box 绑定 [(ngModel)]="serial" 而不是 [ngModel]="serial"

每当输入发生变化时，绑定中的() 会更新serial 模型。从input 到model

如果要手动修改serial的数据，单个[]只会绑定serial的数据。这将导致单向绑定 - 从 model 到 input。

如你所料 - [()] 他们将进行双向绑定。

【讨论】：

不客气。但试着了解发生了什么。这是 Angular 的核心概念之一
你是如何从 type script 中获取值的？
@Illep 在 typescript 类中，您已经有一个名为 serial 的属性，它是绑定的。所以你只需要访问这个属性并获取最新的值

【解决方案2】：

这是一种方式绑定。从视图到控制器。

文件代码.component.html

<label >Code</label>
<input (input)="tcode=$event.target.value" type="text" class="form-control">
<button class="btn btn-success" (click)="submit()">Submit</button>

文件 code.component.ts

tcode : string;
submit() {
    console.log("the code :" + this.tcode);
}

【讨论】：

感谢您提供这个简单的示例。非常感谢。