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

Hold off on refreshing the page until all the $.get calls have finished executing

I am currently using a piece of JavaScript to execute an Ajax call which returns XML data. This XML is then processed, and another Ajax call is made for each "record" found in the XML to delete that record. However, I am facing an issue where the JavaScrip ...

javascriptjqueryajaxpromise

The html-docx-js package generates incomprehensible text

Has anyone successfully utilized html-docx-js recently? I attempted the following code snippet: var newHTML = "<!DOCTYPE html><html><head lang='en'><meta charset='UTF-8'><title>Report</title& ...

javascripthtmlnpmms-worddocx

Implementing sound playback within an AJAX response

Recently, I implemented a jQuery code to automatically refresh a specific div. This auto-refresh feature uses AJAX to generate notifications whenever there is a new request from a client, similar to social network notifications. I even incorporated music f ...

javascriptjqueryajax

Express encountered an issue when trying to upload a file through AngularJS

I am currently facing an issue with uploading a file to express and subsequently to mongoDB. Despite my efforts, when I attempt to upload the file to express, it appears that no data is being passed through the response. I am utilizing ng-file-upload.min. ...

javascriptangularjsnode.jsexpressng-file-upload

Establishing a constant for a JavaScript class method

Although this question may seem basic, I am struggling to grasp how this code works and felt the need to seek clarification here. Take a look at this example of a simple React component: const title = React.createElement( 'h1', {id: &apo ...

javascriptreactjsecmascript-6

What is the best way to shuffle the displayed images on a website to make the order random?

I'm looking to create a unique collage using 10 image files in a folder with vanilla JS. The goal is to randomize the images within a Bootstrap container on a website while maintaining their aspect ratio by utilizing a grid layout. However, I've ...

javascripthtmlcssbootstrap-4

Modifying JavaScript Code in Inspect Element Editor

When I modify the HTML content using Chrome's Inspect Element editor, any changes made are immediately visible. However, when I make changes to the JavaScript code, the modifications do not take effect. For example, if I have a button that triggers a ...

javascriptjqueryhtmldom

Creating a blurred background effect when a React portal is presented

I have implemented React portals to display a modal popup after the form is submitted. However, I am facing an issue with blurring only the background while showing the modal, similar to what is shown in picture 2. Initially, I tried using document.body.st ...

javascripthtmlcssreactjsmodal-dialog

Tips for refreshing a D3.js bubble chart with live JSON data updates

Currently delving into d3 and experimenting with transforming a static bubble chart into a dynamic one that adjusts by removing or adding bubbles based on JSON changes. I am aiming to have the JSON file refreshed every 5 seconds to update the bubble chart ...

javascriptjsonajaxd3.js

A guide to generating dynamic table headers using JSON in React

Looking to create a dynamic table with columns/headers in React based on a JSON array of objects. The data: example = [ { id: 0, city: 'New York', }, { id: 1, city: 'Paris', }, ] Currently, I'm iterating ...

javascriptjsonreactjs

Enhance Your Three.js Experience: Implementing Dots on Vertices

I am working with a wireframe sphere and looking to add dots to the vertices. Something similar to this image: https://i.sstatic.net/pzNO8.jpg. Below is all of my JavaScript code: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( ...

javascriptthree.js

No action is triggered after submitting AJAX data in a WordPress environment

I'm currently working on developing a WordPress plugin that requires querying the database. However, I am facing challenges in getting it to function properly. Here is the code snippet that I have attempted: jQuery('#demo_ajax').submit(func ...

javascriptphpjqueryajaxwordpress

Is there a way to add a listener to a variable within my AngularJS controller?

I need to create a listener for my titleChanged variable. However, when I attempted it this way, I encountered the following error: TypeError: this.$watch is not a function var titleChanged = false; function changeTitle() { t ...

angularjs

What are the steps to resolve the issue of "Type error: Argument 1 passed to AppHttpControllersController::validate() must be an instance of IlluminateHttpRequest"?

I have a code snippet that looks like this: public function functionA(Request $request) { ... if($request->get('data')) { //echo '<pre>';print_r($request->get('data'));echo '</pre>' ...

phparrayslaravelvalidationlaravel-5.3

Strange Reselect selector actions

It seems like my selector function is only triggered when one of the arguments changes, not both. Here's the selector I'm using to retrieve transactions from the state and apply two filters to them: export const getFilteredTransactionsSelector ...

javascriptreactjsreact-hooksreselect

Ensure that a group of checkboxes is mandatory

I currently have a series of checkboxes set up like so: <label>What is your preferred movie genre?</label> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="genre1" name="genre" ...

javascripthtml

Managing form submissions in React with inputs spread across multiple components

I've been working on a ReactJS project with a form that is divided into multiple components. The main component imports all the child components, each containing input boxes, along with a submit button: My issue lies in trying to get all the componen ...

javascriptreactjsforms

The repository's dependencies remain unresolved by Nest

I encountered an error in my nestjs application. Unfortunately, I am having trouble identifying the issue within my code snippet. Here is a glimpse of the relevant sections: AppModule import { Module } from '@nestjs/common'; import { TypeOrmMod ...

javascriptnode.jstypescriptnestjstypeorm

Using Java script to parse and interpret a JSON file

I have a JSON file that follows this structure. Being new to JavaScript, I am looking for guidance on how to extract each key and its associated value. Can someone help me understand where to begin? AuthServer.Web": { "stuff": { "evenmore st ...

javascripthtmljson

Using Angular's ng-repeat directive in combination with checkboxes allows for easy manipulation of checkboxes in a web application. One

I have a set of checkboxes that generate tags in a textarea. When a user removes a tag, I want the corresponding checkbox to be unchecked as well. It's crucial that when a user navigates away from the page and returns, the checkboxes retain their pre ...

angularjs