Clear input text AngularJS

Question

I am using Glyphicon icon in my input controls once it finds some error. Glyphicon icon has both error and correct images on it. But I want to clear that input control on clicking of error glyphicon. below is my code:

 <div class="{{layout=='horizontal'? fieldClass || 'col-lg-9':''}} ">
        <div style="position:relative" class="input-group">
            <span class="input-group-addon"><b>PD</b></span>
            <div class="icon-addo addon-md">
                <input type="text" class="form-control {{textboxClass}}" name="textControl" id="textControl" ng-readonly="readonly" ng-required="required"
                       maxlength="10" placeholder="{{placeholder || layout=='inline' ? labelText : ''}}" data-ng-model="vm.value" ng-blur="vm.onBlur()" />

                <i ng-show="vm.state==1" class="form-control-feedback fa fa-spinner fa-spin" style="width: auto; height:auto; font-size: 25px; top:5px; right:10px"></i>
                <i onclick="clearControl(this,'textControl');" class="form-control-feedback" ng-class="{'glyphicon glyphicon-ok': vm.state==2, 'glyphicon glyphicon-remove': vm.state==3}" style="width: auto; height:auto; font-size: 20px; top:0; right:10px"></i>
            </div>
        </div>
        <div ng-show="textForm['textControl'].$error.required && (submitted || !textForm['textControl'].$pristine)" class="help-block ng-hide">{{labelText}} is required</div>
    </div></i>

Please help.

dfsq · Accepted Answer · 2014-10-09 06:58:56Z

2

Don't use inline onclick handlers. You can clear input simply with ngClick directive:

<i ng-click="vm.value = ''" class="form-control-feedback" ng-class="{'glyphicon glyphicon-ok': vm.state==2, 'glyphicon glyphicon-remove': vm.state==3}" style="width: auto; height:auto; font-size: 20px; top:0; right:10px"></i>

I would also recommend to clear HTML, move styles to CSS files, it would make you code more comprehensive.

answered Oct 9, 2014 at 6:58

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3169167 Over a year ago

Actually later on I used ng-click but here I want to call a function instead of direct clearing field here because I want to check some other values in controller also. But your response helped. Thanks.

Collectives™ on Stack Overflow

Clear input text AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related