Question

我正在使用Bootstrap Form Input来允许用户传入一些文本。如何保存该文本并将其用作函数中的参数？

这是我的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>

正如您所看到的，我调用了一个名为convert（inputString）的方法，该方法接受一个字符串参数（convert（string s）在我的TypeScript文件夹中实现）。我在方法中放置了'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

从Bootstrap Form Input获取输入值

1 个答案: