0

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

这也没有奏效......

有没有其他人尝试过类似的东西并让它工作？

期待你的回信。

亲切的问候，

罗兰斯莱杰斯

4

1 回答 1

0

您没有指定属性 formGroup。你也不能使用this. 删除所有this.前缀，您应该<form>在 HTML 和组件中添加一个标签，并添加绑定，以便您可以访问该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>
于 2017-08-22T07:27:30.147 回答