Adding custom validation to angular textarea

Question

I want to add custom validation to the angular form.

<div class="form-group" ng-class="{ 'has-error': contactform.inputAmount.$invalid && submitted }">
    <label for="inputAmount" class="col-lg-2 control-label">Amount</label>
      <div class="col-lg-10">
         <textarea ng-model="formData.inputAmount" class="validate[required,custom[comment]] feedback-input" rows="4" id="comment" name="comment" placeholder="Enter Amount to Convert" required></textarea>
     </div>
</div>

I want only number or decimal input with inverted commas like

"1"
"123.1"
"123.12221"

How can i add this pattern

Help would be highly appreciated.

Thanks

something like /^[0-9]+((\.)?[0-9]+)?$/ ?

Cerlin
– Cerlin

2016-01-08 05:33:44 +00:00
Commented Jan 8, 2016 at 5:33 — Cerlin
– Cerlin, Commented Jan 8, 2016 at 5:33
where to add this pattern

Owais Ahmed
– Owais Ahmed

2016-01-08 05:35:20 +00:00
Commented Jan 8, 2016 at 5:35 — Owais Ahmed
– Owais Ahmed, Commented Jan 8, 2016 at 5:35

Community · Accepted Answer · 2017-05-23 12:23:31Z

1

You can use ng-pattern to validate your textarea.

Checkout here for example. http://www.java2s.com/Tutorials/AngularJS/AngularJS_Example/Directives/Use_ng_pattern_to_validate.htm

Refer here for dynamic ng-pattern validation Angularjs dynamic ng-pattern validation

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Jan 8, 2016 at 9:37

Narendra CM

1,4263 gold badges13 silver badges23 bronze badges

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

Comments

Thangadurai · Accepted Answer · 2016-01-08 06:00:06Z

Use Directive for custom validations.

First write custom directive:

//Check For FLoat Validation
 adminApp.directive('validateFloat', function() {
 var FLOAT_REGEXP = /^\-?\d+((\.)\d+)?$/;

return {
    require: 'ngModel',
    restrict: '',
    link: function(scope, elm, attrs, ctrl) {
        // only apply the validator if ngModel is present and Angular has added the Float Number validator
        ctrl.$validators.validateFloat = function(modelValue) {
            return  ctrl.$isEmpty(modelValue) || FLOAT_REGEXP.test(modelValue);
        };

    }
};
});

In directive used Regex for float (or) Decimal to check with ngModel value.

Then use directive in html page.

<input type="text" name="amount" class="form-control" ng-model=test.amount" validate-float required>
                                <span class="error-container" ng-show="myForm.amount.$dirty && myForm.amount.$invalid">
                            <span ng-cloak style="color:red" ng-show="myForm.amount.$error.required">Please Enter amount</span>
                            <span ng-cloak style="color:red" ng-show="!myForm.amount.$error.required&&myForm.amount.$error.validateFloat">Enter valid amount</span>
                          </span>

In HTML page mention the custom directive "validate-float" as attribute. And for showing error message in ng-Show mention the $error.validateFloat.

For more info about directive and validations: https://docs.angularjs.org/guide/directive, https://docs.angularjs.org/guide/forms

Collectives™ on Stack Overflow

Adding custom validation to angular textarea

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related