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>