從Bootstrap表單輸入中獲取輸入值

Question

我正在使用Bootstrap表單輸入來允許用戶傳入一些文本。我如何着手保存該文本並將其用作函數中的參數？

這裏是我的HTML：

<!--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> 

正如你所看到的，我有一個方法叫做轉換（inputString）在一個字符串參數取值（轉換（字符串s）的調用在我的打字稿文件夾中實現）。我在方法中放置了'inputString'，以便更好地說明我的問題，即使我知道我沒有在其他任何地方使用inputString的id。這是否正確的方式去做 - 創建一個名爲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> 

現在你可以在你的controller.ts文件中引用basicUrl。

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