Checking the validity of forms in Angular JS

Question

Checking the validity of forms in Angular JS

I am currently developing an admin interface where users have the ability to add a specified number of cells. Each cell contains details such as name, imageURL, and destination link.

name
imageURL
destination link

Users can add cells in bulk (starting with 8 but up to 20 at once) or individually.

The challenge I am facing is validating each field to ensure they are properly filled out. My initial plan was to use Angular form validation for this process. However, a requirement states that if a user has a certain number of items but only fills in half of them (leaving an entire cell empty), that cell should be disregarded entirely.

The issue arises when there are already 10 cells loaded - the form (containing all cells) is considered pristine/invalid. Once I fill in all 10 items, the form becomes dirty/valid. Adding 5 more cells makes the form dirty/invalid. Even after filling out 2 of those new cells, the form remains dirty/invalid when ideally it should be dirty/valid.

Any insights on how to address this situation?

View example plunkr: http://plnkr.co/edit/qwObH5LnxLvgJydJlJVS?p=preview

Extra credit if a solution can be implemented without using a form tag.

javascript forms angularjs validation

Answer 1

Answer №1

If you want to allow empty rows but make sure that input fields in a non-empty row cannot be left blank, you can set conditional requirements for each field using the ng-required directive. This way, the field will only be required if there is some text present in another part of the row.

In your plunkr code, simply replace required with ng-required for each input element:

<li ng-repeat="cell in cells">
    <input type="text" name="dest" ng-model="cell.dest" placeholder="Destination Link" ng-required="cell.src || cell.name"/>
    <input type="text" name="src" ng-model="cell.src" placeholder="Image Link" ng-required="cell.dest || cell.name"/>
    <input type="text" name="cellName" ng-model="cell.name" placeholder="Name" ng-required="cell.src || cell.dest"/>
</li>

To make this process more scalable, consider defining a function on either the cell objects or in the controller that checks if a cell object is empty:

function cellCtrl($scope) {
    ...
    $scope.isBlankCell = function(cell) {
        ...
    }
}

Then, you can use this function in the template like so:

<li ng-repeat="cell in cells">
    <input type="text" name="dest" ng-model="cell.dest" placeholder="Destination Link" ng-required="isBlankCell(cell)"/>
    <input type="text" name="src" ng-model="cell.src" placeholder="Image Link" ng-required="isBlankCell(cell)"/>
    <input type="text" name="cellName" ng-model="cell.name" placeholder="Name" ng-required="isBlankCell(cell)"/>
</li>

Answer 2

If you want to allow empty rows but make sure that input fields in a non-empty row cannot be left blank, you can set conditional requirements for each field using the ng-required directive. This way, the field will only be required if there is some text present in another part of the row.

In your plunkr code, simply replace required with ng-required for each input element:

<li ng-repeat="cell in cells">
    <input type="text" name="dest" ng-model="cell.dest" placeholder="Destination Link" ng-required="cell.src || cell.name"/>
    <input type="text" name="src" ng-model="cell.src" placeholder="Image Link" ng-required="cell.dest || cell.name"/>
    <input type="text" name="cellName" ng-model="cell.name" placeholder="Name" ng-required="cell.src || cell.dest"/>
</li>

To make this process more scalable, consider defining a function on either the cell objects or in the controller that checks if a cell object is empty:

function cellCtrl($scope) {
    ...
    $scope.isBlankCell = function(cell) {
        ...
    }
}

Then, you can use this function in the template like so:

<li ng-repeat="cell in cells">
    <input type="text" name="dest" ng-model="cell.dest" placeholder="Destination Link" ng-required="isBlankCell(cell)"/>
    <input type="text" name="src" ng-model="cell.src" placeholder="Image Link" ng-required="isBlankCell(cell)"/>
    <input type="text" name="cellName" ng-model="cell.name" placeholder="Name" ng-required="isBlankCell(cell)"/>
</li>

Answer 3

Answer №2

After coming across your example on plunkr, I got inspired.

By incorporating a delete button, users have the ability to remove unwanted rows and return the form to a dirty/valid state.

Answer 4

After coming across your example on plunkr, I got inspired.

By incorporating a delete button, users have the ability to remove unwanted rows and return the form to a dirty/valid state.

Checking the validity of forms in Angular JS

Answer №1

Answer №2

Similar questions

Guide to incorporating a scroll-follow effect in multiple directions

Changing knockoutJS foreach binding dynamically

What is the best way to implement this ajax preloader?

What is the optimal value for the variable x in this scenario?

Click on an item in the list to remove it from the list

Facing a problem with model binding in Angular's scope?

Display or conceal the location where the click event occurs within a single div

In React, facing difficulty in clearing setTimeout timer

React: Dynamic input field that removes default value as the user begins typing

Retrieving external JSON data with JavaScript

Transmit information to Vue.js component

The instantiation of the cloudinary module failed because of an error with the injector

how to change the color of a specific item in a list created using v-for

Convert data into JSON format and exclude any unnecessary keys

The program is encountering an error message indicating the use of an undefined constant

ReactKonva does not have compatibility with the element type "div"

Inserting an icon into a particular class

jQuery is able to retrieve all the table data (TD) elements within a table

Ways to boost memory capacity in nodejs

Encountering a 503 Error in Loading .js Files from Index.html in a .NET 7.0 Angular Application