Alternatives on On-Blur in Angular

Question

I have a angular code where i am running a text box validation on On Blur . Now if i don't do any change on use the column, the validation will not run. What are the alternatives that i can run this validation on may be Page Load or submit click . Basically i want my validation to run even if that text box is not even touched.

<div class="form-group head2" ng-show="workflowlevel>3">
  <label for="approvedAmountFinal" class="col-md-12 col-sm-12 labels"
    >Approved Amount:
  </label>
  <input
    ng-disabled="rejectedOrMoreInfo || isviewmode || workflowlevel>5"
    type="text"
    class=" col-md-6 col-lg-6 col-sm-6 col-xs-6"
    id="approvedAmountFinal"
    ng-model="$parent.approvedAmountFinal"
    ng-blur="validate($parent.approvedAmountFinal);"
    name="approvedAmountFinal"
    ng-pattern="/^-?[0-9][^\e]*$/"
    required
  />
  <span
    class="error col-md-12 col-sm-12"
    ng-show="myForm.raiseFundRequest1.approvedAmountFinal.$touched && myForm.raiseFundRequest1.approvedAmountFinal.$invalid"
    >This field cannot be blank.</span
  >
  <span
    class="error col-md-12 col-sm-12"
    ng-show="myForm.raiseFundRequest1.approvedAmountFinal.$dirty &&myForm.raiseFundRequest1.approvedAmountFinal.$invalid"
    >This is not a valid amount. Please enter valid amount.</span
  >
  <span class="error col-md-12 col-sm-12" ng-show="isMoreThanRqstAmount"
    >Approved amount should be less than or equal to requested amount</span
  >
  <span
    class="error col-md-12 col-sm-12"
    ng-show="isApprovedAmountZero&&!rejectedOrMoreInfo"
    >Approved amount cannot be zero or lesser.
  </span>
</div>

you can also use this https://stackoverflow.com/questions/40529817/reactive-forms-mark-fields-as-touched/44150793 — R. Viral, Dec 06 '18 at 06:59
remove disabled from submit button, pass form to onSubmit function check for form valid or not, if not valid exit and set a formSubmitted flag. use that formSubmitted flag along with current `ng-show`. also check for custom validation method here https://stackoverflow.com/a/15090867/3769965 — Ebin Manuval, Dec 06 '18 at 08:03

score 0 · Answer 1 · answered Dec 06 '18 at 06:19

0

You can use custom directive or ng-pattern (regex) to validate input textbox in angularJS

answered Dec 06 '18 at 06:19

Parthipan Subramaniam

332
1
12

ng-pattern is already there . I want to run all the validation in the Span Tag – Nirpeksh Dec 06 '18 at 06:21

score 0 · Answer 2 · answered Dec 06 '18 at 06:56

0

You can set validation manually on form submit, check bellow code.

this.myForm.raiseFundRequest1.approvedAmountFinal.markAsToched();
this.myForm.raiseFundRequest1.approvedAmountFinal.markAsInvalid();

same for your other ngIf condition set as true, let me know if this things not work.

answered Dec 06 '18 at 06:56

R. Viral

386
1
6

I have the ng-disabled on Submit Click for various validations on the page how would i write this ? i have the code like **
Validations pending
** – Nirpeksh Dec 06 '18 at 07:09
can you create stackbiz for your related issue? i will check your code. – R. Viral Dec 06 '18 at 07:12
not sure how to create it. Can you help here please? – Nirpeksh Dec 06 '18 at 07:21
login/signup to https://stackblitz.com/ with github account > select angular as language, they provide predefined setup of angular environment you can put your code there – R. Viral Dec 06 '18 at 08:04

Alternatives on On-Blur in Angular

2 Answers2