If the first <select> option is chosen, then a second <select> validation is necessary

Is it possible to make the second selection required for validation only if the 'yes' option is selected in the first one?

<div class="form-group" ng-class="{ 'has-error' : articleEditForm.pnp.$invalid && !articleEditForm.pnp.$pristine }">
    <label class="control-label col-sm-2">Working? (yes/no) *</label>
    <div class="col-sm-10">
      <select class="form-control" name='pnp' id='pnp' ng-model="article.pnp" ng-options="o.value as o.option for o in items" required></select>
    </div>
  </div>

  <div class="form-group" ng-class="{ 'has-error' : articleAddForm.idpnpgrupe.$invalid && !articleAddForm.idpnpgrupe.$pristine }">
    <label class="control-label col-sm-2">Pnp group </label>
    <div class="col-sm-10">
      <select class="form-control" name='idpnpgrupe' id='idpnpgrupe' ng-model="article.idpnpgrupe" ng-options="o.id as o.opis for o in catchpnpgrupe"></select>
    </div>
  </div>
javascriptangularjsvalidationselect

Answer №1

To make an input element required, you can utilize the ng-required directive and set an expression for the input element. If the expression evaluates to true, the input will then become mandatory to fill out.

<select class="form-control" name='groupID' id='groupID' ng-model="data.groupID" ng-options="o.id as o.description for o in groupOptions" ng-required="data.selection=='yes'"></select>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What makes fastify-plugin better than simply calling a regular function?

I recently came across a detailed explanation of how fastify-plugin operates and its functionality. Despite understanding the concept, I am left with a lingering question; what sets it apart from a standard function call without using the .register() metho ...

javascripttypescriptfastify

Using `require(variable)` is not functional in next-js environment

I'm attempting to display an image using the next-optimised-images module. When I try to include images like this: <img src={require(c.logo)} alt={c.title} /> I encounter the following error: https://i.stack.imgur.com/Jtqh9.png However, when ...

javascriptnode.jswebpacknext.js

How can I use conditional 'if' statements to import separate modules in Node.js ES Modules?

Recently, I tried out a tutorial that utilises CommonJS for exporting/ importing different keys depending on the environment. However, I am wondering how I can make it compatible with ES Modules import/export instead? This is the code snippet provided in ...

javascriptnode.jsnode-moduleses6-modulesesmodules

Exploring the JSON data in Javascript using Ajax

Completely new to Javascript, I am just trying to grasp the basics of the language. Currently, I have a JSON request set up with the following code: function request(){ $.ajax({ dataType: "jsonp", type: 'GET', url: "getWebsite", ...

javascriptjqueryjsonajax

How can I limit the input to only show two decimal places in AngularJS?

Recently I just started with the world of Angular. Can anyone provide me with some guidance on how to achieve this task? $scope.var1 = 125.548765; $scope.var2 = 125.54 I'm trying to calculate a value using var1 but want it displayed on screen as var ...

angularjsangularjs-directiveangularjs-scope

Modified the object path and updated the Dirty stages for nested objects within Vue state

Imagine having an object that contains arrays of objects in some properties. Whenever changes are made to any field, whether it's within an object in an array or the main object itself, you want to mark that object as "dirty" using a code snippet like ...

javascriptvue.js

What is the best way to rearrange DOM elements using the output of a shuffle function?

Looking for a solution to shuffle and move around cards in an HTML memory game? Let's analyze the current setup: <ul class="deck"> <li class="card"> <i class="fa fa-diamond"></i> </li> ...

javascriptjqueryarraysshuffle

Setting up paths to bypass authentication on an Express website

Currently, I am in the process of developing an application using node and express. I have implemented a passport authorization middleware for all routes as part of my highly modular approach to building the app. One challenge I have encountered is when tr ...

javascriptnode.jsexpressauthentication

Objects that are included into an array will end up with an undefined value

Currently, I am in the process of coding a command for my Discord bot that involves adding items to an array of objects stored within a JSON file. To achieve this functionality, I have implemented the following code snippet: let rawdata = fs.readFileSync(& ...

javascriptjsondiscord.jsjavascript-objects

Struggling to get this bootstrap carousel up and running

I can't seem to get this bootstrap carousel to switch slides, whether I use the indicators or arrows. My other carousel works perfectly fine and I've added all necessary Bootstrap and JavaScript CDNs. I'm puzzled as to why it's not func ...

javascriptreactjsbootstrap-4next.js

Tally the quantity of data points within jQuery Datatables

Upon navigating to my jQuery DataTable, I aim to showcase the count of Users pending activation. Typically, I would use fnGetData with (this), but since I am not triggering this on a click event and wish to count all entries in the table, I am unsure of ho ...

javascriptjqueryhtmlajaxdatatables

Struggling to pass command line arguments to index.ts with yarn?

My objective is to pass arguments through the command line using yarn start to index.ts. "scripts": { "start": "tsc-watch --onSuccess \"ts-node --pretty -r tsconfig-paths/register' src/index.ts\"", } When I attempt something like: yarn ...

javascriptnpmyarnpkg

Toggle the visibility of buttons within the "ion-nav-bar" based on the current view

When it comes to hiding and showing icons based on the view, I seem to have hit a roadblock. It appears that the ion-nav-bar is only accessible from the tabsCtrl. Below is the markup for the view: <ion-nav-bar class="bar-stable"> <ion-nav-back ...

angularjsionic-frameworkionic-view

What is the best way to save a current HTML element for later use?

Here is a simple HTML code that I would like to save the entire div with the class test_area and then replicate it when needed. Currently, my goal is to duplicate this div and place the clone underneath the original element. How can I achieve this? Unfortu ...

javascripthtmlcreateelement

Is it possible to disable the timeout for a single call using Axios?

I have set up an axios client instance in my application like this: const backendClient = axios.create({ baseURL: window['getConfig']?.url?.backend, httpsAgent: new https.Agent({ rejectUnauthorized: false }), timeout: window['getConfig ...

javascriptreactjsaxios

Having issues retrieving accurate data from a service in an AngularJS controller

I am currently facing some challenges with a service while trying to develop a mobile app using Ionic/Angular/Cordova. The code snippet in question is as follows: SERVICE: 'use strict'; angular.module('MyDemoApp.services').ser ...

angularjscordovaionic-frameworkangularjs-serviceangularjs-controller

I have always wondered about the meaning of " + i + " in Javascript. Can you explain it to

<script> var x,xmlhttp,xmlDoc xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "cd_catalog.xml", false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; x = xmlDoc.getElementsByTagName("CD"); table="<tr><th>Artist</th><th>Ti ...

javascripthtmlajax

Methods for resolving a ViewStyle typescript issue in react native

Trying to pass a width parameter into StyleSheet is causing an error like this: <View style={styles.children(width)}>{children}</View> Here's how I'm trying to use it: const styles = StyleSheet.create({ modalContent: { flex: ...

javascriptreactjstypescriptreact-nativereact-native-stylesheet

bulk purchase discount with HTML/JavaScript/PHP

I am looking to add a slider feature to my "Prices" page in order to provide customers with an instant quote based on the quantity they select. The slider should range from 1 to 500 or even up to 1000, but having an input box for customers to enter the qu ...

javascriptphphtmlcss

The function view() is not displaying the CSS and JS files properly

Having trouble with loading the css and js on my view: This is how I set up the controller: return view('home.news') ->with("news", $news); And here's how the route is defined: Route::get('/news/{id}&apos ...

javascriptphphtmlcsslaravel