Currently, I am focusing on enhancing an AngularJS custom text input component:
<div class="form-group has-feedback"
ng-class="[$ctrl.sizeClass, {'has-error': $ctrl.isNotValid(), 'has-success':
$ctrl.isValid()}]"
>
<label class="control-label col-xs-3" for="{{$ctrl.name}}">
<span ng-bind="$ctrl.label"></span>
<small ng-if="$ctrl.isRequired">
<span aria-hidden="true" class="text-danger">
*
</span>
<span class="sr-only">
(field is required)
</span>
</small>
</label>
<!-- The input functions correctly -->
</div>
I aim to implement sizing based on the Bootstrap form-group sizing:
var sizes = {
'sm': 'form-group-sm',
'lg': 'form-group-lg',
};
$ctrl.$onChanges = function (changes) {
if (changes.size) {
$ctrl.sizeClass = sizes[$ctrl.size];
}
}
Although the size of the input adapts appropriately, the size of the label remains constant. There seems to be a minor issue that I cannot pinpoint. Your assistance would be greatly appreciated. Thank you in advance for any help provided.