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

Question

这似乎是一个简单的问题,但我认为没有什么对我有用.我的component.html中有一个标准输入字段:

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

因此,当用户现在提交表单时,如何获得他在字段中输入的值？如果我console.log(this.serial)在我的onSubmit()功能中做一个简单的事情,我什么也得不到.我serial: String;在我的组件中声明了

Answer 1

你有错误的约束.你需要香蕉在盒子里绑定[(ngModel)]="serial"而不是[ngModel]="serial"

()在绑定中,serial每当输入发生变化时,都会更新模型.从input进入model

Single []将仅绑定数据,serial如果它将由代码手动更改.这将导致单向绑定 - 从model进入input.

正如你猜 - [()]他们将一起做双向绑定.

Answer 2

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

文件code.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);
}