[英]Angular 2.x/4.x & bootstrap: Trying to make form-control with “active” feedback button to clear contents
Hi there fellow Angular 2.x/4.x + bootstrap coders, 嗨,还有Angular 2.x / 4.x +引导程序编码器,
I am trying to make an input type="text" with "active" feedback button, that only pop's up when something is entered. 我正在尝试使用“活动”反馈按钮来输入type =“ text”,仅当输入内容时弹出。 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: 接下来,我尝试将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>
This unfortunately did not work... 不幸的是,这没有用...
Next I tried it using 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>
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 罗兰·史莱格斯(Roland Slegers)
You dont have a property formGroup specified. 您没有指定属性formGroup。 Also you can't use
this
. 你也不能使用
this
。 Remove all this.
删除所有
this.
一切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: 前缀,您应该在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.