Angular 2.x/4.x & bootstrap: Trying to make form-control with “active” feedback button to clear contents

Question

Hi there fellow Angular 2.x/4.x + bootstrap coders,

I am trying to make an input type="text" with "active" feedback button, that only pop's up when something is entered. With the feedback button the user should be able to clear the input field again.

I tried several things already:

The most obvious:

    <div class="form-group has-feedback">
        <label for="username">{{ 'username' | translate }}*</label>
        <input type="text" class="form-control" formControlName="username" placeholder="{{ 'please enter username' | translate }}">
        <span class="glyphicon glyphicon-remove form-control-feedback" style="color: #007734!important" aria-hidden="true" *ngIf="this.formGroup.controls['username'].value !== ''" (click)="this.clearUsername();"></span>
    </div>

The click event never fires... :-(

Next I tried to pull-out the click event into an a:

        <div class="form-group has-feedback">
            <label for="username">{{ 'username' | translate }}*</label>
            <input type="text" class="form-control" formControlName="username" placeholder="{{ 'please enter username' | translate }}">
            <a type="button" class="form-control-feedback" (click)="this.clearUsername()">
                <span class="glyphicon glyphicon-remove" style="color: #007734!important" aria-hidden="true" *ngIf="this.formGroup.controls['username'].value !== ''"></span>
            </a>
        </div>

This unfortunately did not work...

Next I tried it using a div:

    <div class="form-group has-feedback">
        <label for="username">{{ 'username' | translate }}*</label>
        <input type="text" class="form-control" formControlName="username" placeholder="{{ 'please enter username' | translate }}">
        <div class="form-control-feedback">
            <a type="button" (click)="this.clearUsername()">
                <span class="glyphicon glyphicon-remove" style="color: #007734!important" aria-hidden="true" *ngIf="this.formGroup.controls['username'].value !== ''"></span>
            </a>
        </div>
    </div>

This also did not work...

Has someone else tried something similar and got it working?

I hope to hear from you.

With kind regards,

Roland Slegers

Answer 1

You dont have a property formGroup specified. Also you can't use this . Remove all this. prefixes and you should add a <form> tag, in your HTML and also in your componente and add the binding so you can access the formGroup property:

<form [formGroup]="formGroup">
    <div class="form-group has-feedback">
        <label for="username">{{ 'username' | translate }}*</label>
        <input type="text" class="form-control" formControlName="username" placeholder="{{ 'please enter username' | translate }}">
        <span class="glyphicon glyphicon-remove form-control-feedback" style="color: #007734!important" aria-hidden="true" *ngIf="formGroup.controls['username'].value !== ''" (click)="clearUsername();"></span>
    </div>
</form>