Styling errors in AngularJS validation code

Question

Styling errors in AngularJS validation code

I am facing an issue with the code below that generates 3 text boxes. When I click on one text box, all 3 of them get focused, despite having different name and label values.

<div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]">

    <div class="col-md-2" style="padding:0px; margin-right:1%;">
        <p style="font-size:11px;">P no {{dohPolicy}} </p>
    </div>
    <div class="form-group col-md-6"  
            data-ng-class='{ "has-focus": dohForm.dohPolicy.hasFocus,
                             "has-success": dohForm.dohPolicy.$valid,
                             "has-error": dohForm.dohPolicy.$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched),
                             "is-empty": !dohForm.dohPolicy.$viewValue }' 
                             style="right: 150px; bottom: 40px; padding: 0;  width:20%;">
        <label for="dohPolicy"></label>
        <input type="text" name="dohPolicy"
                    data-ng-model="dohPolicy" required readonly
                    data-ng-blur='dohForm.dohPolicy.hasFocus=false'
                    data-ng-focus='dohForm.dohPolicy.hasFocus=true'>
        <p data-ng-show="dohForm.dohPolicy.$error.required && (dohForm.dohPolicy.$touched || submitted)"
                class="error-block">
           P Number(s)
        </p>
    </div>
</div>

Even after trying to use string arrays, I haven't been able to resolve this issue. I would like only the clicked text box to be focused and highlighted.

Any assistance is welcomed!

Thank you

html css angularjs validation ng-class

Answer 1

Answer №1

<input type="text" name="dohPolicy"
                                data-ng-model="dohPolicy" required readonly
                                data-ng-blur='dohForm.dohPolicy.hasFocus=false'
                                data-ng-focus='dohForm.dohPolicy.hasFocus=true' 
                                >

All dynamically generated input texts here share the common model dohPolicy.

As a result, they all become dirty simultaneously and trigger the blur & focus events.

Ensure to assign a unique name for each model.

Answer 2

<input type="text" name="dohPolicy"
                                data-ng-model="dohPolicy" required readonly
                                data-ng-blur='dohForm.dohPolicy.hasFocus=false'
                                data-ng-focus='dohForm.dohPolicy.hasFocus=true' 
                                >

All dynamically generated input texts here share the common model dohPolicy.

As a result, they all become dirty simultaneously and trigger the blur & focus events.

Ensure to assign a unique name for each model.

Answer 3

Answer №2

Utilize $index in your naming convention and perform dynamic validation

<div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]">

    <div class="col-md-2" style="padding:0px; margin-right:1%;">
        <p style="font-size:11px;">Policy no {{dohPolicy}} </p>
    </div>
    <div class="form-group col-md-6"  
    data-ng-class='{ "has-focus": dohForm.dohPolicy.hasFocus,
        "has-success": dohForm.dohPolicy.$valid,
        "has-error": dohForm.dohPolicy.$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched),
        "is-empty": !dohForm.dohPolicy.$viewValue }' 
        style="right: 150px; bottom: 40px; padding: 0;  width:20%;">
        <label for="dohPolicy">
        </label>
    <input
        type="text" name="dohPolicy_{{$index}}"
        data-ng-model="dohPolicy" required readonly
        data-ng-blur='dohForm.dohPolicy.hasFocus=false'
        data-ng-focus='dohForm.dohPolicy.hasFocus=true' 
        >
        <p
        data-ng-show="dohForm['dohPolicy_' + $index].$error.required && (dohForm.dohPolicy.$touched || submitted)"
        class="error-block">Policy Number(s)</p>
    </div>

</div>

Answer 4

Utilize $index in your naming convention and perform dynamic validation

<div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]">

    <div class="col-md-2" style="padding:0px; margin-right:1%;">
        <p style="font-size:11px;">Policy no {{dohPolicy}} </p>
    </div>
    <div class="form-group col-md-6"  
    data-ng-class='{ "has-focus": dohForm.dohPolicy.hasFocus,
        "has-success": dohForm.dohPolicy.$valid,
        "has-error": dohForm.dohPolicy.$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched),
        "is-empty": !dohForm.dohPolicy.$viewValue }' 
        style="right: 150px; bottom: 40px; padding: 0;  width:20%;">
        <label for="dohPolicy">
        </label>
    <input
        type="text" name="dohPolicy_{{$index}}"
        data-ng-model="dohPolicy" required readonly
        data-ng-blur='dohForm.dohPolicy.hasFocus=false'
        data-ng-focus='dohForm.dohPolicy.hasFocus=true' 
        >
        <p
        data-ng-show="dohForm['dohPolicy_' + $index].$error.required && (dohForm.dohPolicy.$touched || submitted)"
        class="error-block">Policy Number(s)</p>
    </div>

</div>

Answer 5

Answer №3

As per @Riyaj's suggestion, all input controls share the same model and name, causing them to all become dirty simultaneously.

It is crucial for each control within a form to have a unique name.

Therefore, it is necessary to assign different names to individual input controls.

<form role="form" novalidate name="vm.form">
  <div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]">
      <div class="col-md-2" style="padding:0px; margin-right:1%;">
          <p style="font-size:11px;">P no {{dohPolicy}} </p>
      </div>
      <div class="form-group col-md-6"  
      data-ng-class='{ "has-focus": dohForm.dohPolicy[{{dohPolicy}}].hasFocus,
              "has-success": dohForm.dohPolicy[{{dohPolicy}}].$valid,
              "has-error": dohForm.dohPolicy[{{dohPolicy}}].$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched),
              "is-empty": !dohForm.dohPolicy[{{dohPolicy}}].$viewValue }' 
              style="right: 150px; bottom: 40px; padding: 0;  width:20%;">
          <label for="dohPolicy">
          </label>
      <input
          type="text" name="dohPolicy[{{dohPolicy}}]"
          data-ng-model="dohPolicy" required
          data-ng-blur='dohForm.dohPolicy[{{dohPolicy}}].hasFocus=false'
          data-ng-focus='dohForm.dohPolicy[{{dohPolicy}}].hasFocus=true' 
          class="form-control"
          >
          <p
          data-ng-show="dohForm.dohPolicy[{{dohPolicy}}].$error.required && (dohForm.dohPolicy[{{dohPolicy}}].$touched || submitted)"
          class="error-block">P Number(s)</p>
      </div>
    </div>
</form>

I trust this information will be beneficial to you.

Answer 6

As per @Riyaj's suggestion, all input controls share the same model and name, causing them to all become dirty simultaneously.

It is crucial for each control within a form to have a unique name.

Therefore, it is necessary to assign different names to individual input controls.

<form role="form" novalidate name="vm.form">
  <div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]">
      <div class="col-md-2" style="padding:0px; margin-right:1%;">
          <p style="font-size:11px;">P no {{dohPolicy}} </p>
      </div>
      <div class="form-group col-md-6"  
      data-ng-class='{ "has-focus": dohForm.dohPolicy[{{dohPolicy}}].hasFocus,
              "has-success": dohForm.dohPolicy[{{dohPolicy}}].$valid,
              "has-error": dohForm.dohPolicy[{{dohPolicy}}].$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched),
              "is-empty": !dohForm.dohPolicy[{{dohPolicy}}].$viewValue }' 
              style="right: 150px; bottom: 40px; padding: 0;  width:20%;">
          <label for="dohPolicy">
          </label>
      <input
          type="text" name="dohPolicy[{{dohPolicy}}]"
          data-ng-model="dohPolicy" required
          data-ng-blur='dohForm.dohPolicy[{{dohPolicy}}].hasFocus=false'
          data-ng-focus='dohForm.dohPolicy[{{dohPolicy}}].hasFocus=true' 
          class="form-control"
          >
          <p
          data-ng-show="dohForm.dohPolicy[{{dohPolicy}}].$error.required && (dohForm.dohPolicy[{{dohPolicy}}].$touched || submitted)"
          class="error-block">P Number(s)</p>
      </div>
    </div>
</form>

I trust this information will be beneficial to you.

Styling errors in AngularJS validation code

Answer №1

Answer №2

Answer №3

Similar questions

Submit the scaled-down form image to the server

An error has occurred: [$injector:modulerr] Unable to create module xxApp because: Error: [$injector:nomod] Module 'xxApp' does not exist

Using either AngularJS's simple .then method or the $q service to handle asynchronous requests

Can someone explain how I can use Selenium and Python to choose an available date using a calendar picker?

Aligning three hyperlinks evenly to spread across the webpage

In the past, I've crafted buttons and other elements using Photoshop, and subsequently saved them for web use. However, I'm now contemplating whether it's more advantageous to employ CSS in

The positioning in CSS is not functioning as expected in a customized component

Laravel 4 not receiving data from Angular $http PUT request in 'multipart/form-data' format

An issue has occurred while utilizing Angular

Is there a way to delete a wrapper (parent element) in Angular without deleting the child element as well?

Guide to retrieving a user's current address in JSON format using Google API Key integrated into a CDN link

Elegant URLs using AngularJS and .htaccess

The formatting of the list is not being correctly displayed in the Ajax Jquery list

Is the HTML5 capture attribute compatible with wkwebview?

Unable to remove the vertical dropdown menu padding issue in Firefox

No results found for the xpath within the <p> tag

Is Javascript the best choice for managing multiple instances of similar HTML code?

What is the best way to showcase the outcome on the current page?

Changing CSS properties in React

Rows within distance