Angular 2.x / 4.x和引导程序：尝试使用“活动”反馈按钮进行表单控制以清除内容

Question

嗨，还有Angular 2.x / 4.x +引导程序编码器，

我正在尝试使用“活动”反馈按钮来输入type =“ text”，仅当输入内容时弹出。 使用反馈按钮，用户应该能够再次清除输入字段。

我已经尝试了几件事：

最明显的：

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

点击事件永远不会触发... :-(

接下来，我尝试将click事件拉出到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>

不幸的是，这没有用...

接下来，我使用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>

这也没有用...

有人尝试过类似的方法并使其起作用吗？

期待你的回信。

亲切的问候，

罗兰·史莱格斯（Roland Slegers）

Answer 1

您没有指定属性formGroup。 你也不能使用this 。 删除所有this.一切this. 前缀，您应该在HTML和组件中添加<form>标记，并添加绑定，以便可以访问formGroup属性：

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