Get input value from Bootstrap Form Input

Question

I'm using a Bootstrap Form Input to allow the user to pass in some text. How do I go about saving that text and using it as a parameter in a function?

Here's my 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>

As you can see, I have a call to a method called convert(inputString) that takes in a string parameter (convert(string s) is implemented in my TypeScript folder). I placed 'inputString' inside the method to better illustrate my question even though I know I don't have an id for inputString anywhere else. Is that the proper way to go about this - creating an id with the name inputString and linking it to the text the user inputs? If so, how do I go about doing that?

Alexander Ciesielski · Accepted Answer · 2016-10-12 18:35:59Z

You should bind the <input> to [(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>

Now you can reference basicUrl in your controller.ts file.

basicUrl: string;

Also, don't forget to import FormsModule in app.module.ts.

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

Collectives™ on Stack Overflow

Get input value from Bootstrap Form Input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related