角2.X/4.x版和引导：试图使表单控件与“积极”的反馈按钮清除内容

Question

您好同胞角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> 

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

接下来我试着拔出click事件成一个：

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

这也没有工作......

先后别人尝试过类似的东西，并得到它的工作？

我希望听到您的消息。

随着亲切的问候，

罗兰Slegers

Answer 1

你不必指定的属性formGroup。你也不能使用this。删除所有this.前缀，你应该添加一个<form>标签，在你的HTML，并在您的componente并添加绑定，所以你可以访问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>