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

Question

嗨，Angular 2.x/4.x + 引导编码员，

我正在尝试使用"活动"反馈按钮制作一个输入类型="文本"，只有在输入某些内容时才会弹出。使用反馈按钮，用户应该能够再次清除输入字段。

我已经尝试了几件事：

最明显的：

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

单击事件永远不会触发... ：-(

接下来，我尝试将点击事件拉出为：

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

这也行不通...

其他人是否尝试过类似的东西并使其正常工作？

我希望收到您的来信。

带着亲切的问候，

罗兰·斯莱格斯

Answer 1

您没有指定属性 formGroup。您也不能使用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>