ブートストラップフォーム入力からの入力値を取得する

Question

私は、ブートストラップフォーム入力を使用して、ユーザーが何らかのテキストを渡すことを許可しています。どのようにテキストを保存し、それを関数のパラメータとして使用するのですか？あなたが見ることができるように、私は私の活字体フォルダ内に実装されているメソッドと呼ばれる変換（文字列sに変換（文字列パラメータを取り込み（inputStringから））への呼び出しを持って

<!--Directory Input Form--> 
<div class="row"> 
    <div class="input-group"> 
     <span class="input-group-addon" id="basic-addon3">Directory</span> 
     <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> 
    </div> 
</div> 

<!--Convert Button--> 
<div class="panel-body"> 
    <button type="button" class="btn btn-primary" (click)="convert(inputString);">Convert</button> 
</div> 

：ここ

は私のHTMLです）。私はinputStringのidをどこにも持っていないことを知っていても、私の質問をよりよく説明するためにメソッドの中に 'inputString'を配置しました。これは適切な方法ですか？つまり、inputStringという名前のIDを作成し、それをユーザーが入力したテキストにリンクしますか？もしそうなら、私はそれをどうやって行うのですか？

Answer 1

<input>を[(ngModel)]にバインドする必要があります。

<!--Directory Input Form--> 
<div class="row"> 
    <div class="input-group"> 
     <span class="input-group-addon" id="basic-addon3">Directory</span> 
     <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" [(ngModel)]="basicUrl" name="basicUrl"> 
    </div> 
</div> 

<!--Convert Button--> 
<div class="panel-body"> 
    <button type="button" class="btn btn-primary" (click)="convert(inputString);">Convert</button> 
</div> 

ここで、basicUrlをcontroller.tsファイルで参照できます。

basicUrl: string;

また、app.module.tsでFormsModuleをインポートすることを忘れないでください。

import { FormsModule } from '@angular/forms'; 

@NgModule({ 
    imports: [ 
     // Angular 2 
     BrowserModule, 
     FormsModule 
    ], 
    declarations: [ 
     AppComponent 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

https://angular.io/docs/ts/latest/guide/forms.html