web-dev-qa-db-ja.com

angular 5の入力テキストフィールドから値を取得します

それは簡単な質問のようですが、私が見つけたものは私にとってうまくいきませんでした。私の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()を実行しても、何も得られません。私のcomponent.tsで_serial: String;_を宣言しました

angulartypescriptmean-stack
4
Sithys

あなたは間違った境界を持っています。 _[ngModel]="serial"_の代わりにbanana-in-boxバインディング[(ngModel)]="serial"が必要です

バインディングの_()_は、入力が変更されるたびにserialモデルを更新します。 inputからmodelへ

単一の_[]_は、コードによって手動で変更される場合、serialのデータをバインドするだけです。これは一方向バインディング-modelからinputへの原因になります。

ご想像のとおり、一緒に[()]を使用すると、two-wayバインディングになります。

19
Suren Srapyan

これは一方向のバインディングです。ビューからコントローラーまで。

ファイル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);
}
6
m.a. sanjaya