I have encountered an issue already posted on GitHub regarding this matter, but unfortunately, no solution has been provided yet. You can view the issue here: https://github.com/angular/components/issues/11333
I was wondering if there are any workarounds available.
You can take a look at this link for more information:
The link provides an explanation of the error. When a user submits an empty form, the text field highlights in red, but the radio buttons do not get highlighted.
Thank you
To customize your radio buttons, simply include the following code in your styles.scss or styles.css file:
.mat-radio-group.ng-invalid.ng-touched .mat-radio-outer-circle {
border-color: red;
}
.mat-radio-group.ng-invalid.ng-touched .mat-radio-label-content {
color: #f44336;
border-bottom: 2px solid #f44336;
}
Remember to mark the form as touched during submission:
submit(form: FormGroup) {
if (form.valid){
.....
}
else
this.form.markAllAsTouched();
}
For a live example, check out this stackblitz
Please note: - It is necessary to "force" the radio group to be marked as touched. - The StackBlitz link provided may not display the code correctly.
I am currently in the process of developing an application for file backup, which involves a lot of reading and writing to the filesystem. While most parts of the app are functioning well, I am facing some challenges with error handling. In the image belo ...
Let me show you exactly what I mean by setting up a demo Nuxt blog at https://example.com/nuxtblog/. This demonstration includes articles populated by the @nuxt/content package. The website has been generated statically using the nuxt generate command. Fol ...
Below is a JavaScript function that I have: function GetSelectedItem() { var e = document.getElementById("country"); var strSel = e.options[e.selectedIndex].value; alert(strSel); var url = "${createLink(controller:'country', act ...
Struggling to get this post API to function properly, where it's supposed to post data to a database table. However, whenever I test it on Postman, I keep encountering this error: SyntaxError: Unexpected token ' in JSON at position 68 at JSON ...
Having trouble setting up a filter? I need to create a feature where checked values from checkboxes are displayed in a specific div after submitting. The display should include a 'Clear All' button and individual 'X' buttons to remove e ...
My goal is to invoke the WebServer [mongoose embedded webserver] that is currently running on another machine. Here is the code snippet: var express = require('express'); var http = require('http'); var router = express.Router(); /* ...
When I click the edit change button, I am updating information and then hiding the form to show the updated details by clicking on the Save Changes button. My API successfully updates the information, but for some reason, ng-if does not seem to work afte ...
I am looking to populate a dropdown select menu with bank names and IIN numbers obtained from the following JSON: JSON Data : {"status":true,"message":"Request Completed","data":[{"id":1,"activeFlag":1,"bankName":"Union Bank of India","details":"Union Ba ...
Check out this unique playground. interface Feature { readonly name: string; } // <Test> // This is OK interface Foo1 { readonly arr: ReadonlyArray<Feature>; } function save1(foo: Foo1) { console.log(foo); } // </Test> // <Tes ...
Recently, I encountered a strange issue in our project involving 3 microservices, all using the exceljs library. Two of the microservices successfully download all necessary files for this package through yarn. However, the third microservice is missing ...
Initially, I wrote this code to retrieve a single data point. However, I realized that I needed more fields returned when the drop-down select menu triggered an onchange event. So, I switched to using JSON, but now it's not returning any data. The dro ...
In my Express.js app, I am working on creating a simple menu. My goal is to add the "active" class to the menu list item of the page that is currently being visited. Here is the code snippet from my Jade view file: li(class = path === "/id/admin" ? "activ ...
https://fontawesome.com/icons/ When looking for an icon, the website provides a class to add to the HTML code. However, when using Angular, it is necessary to use icon definitions. For instance: <i class="fa-solid fa-star"></i> Wo ...
Is there a solution to this issue? https://i.sstatic.net/ciFZe.png⠀⠀⠀⠀⠀⠀⠀⠀ ...
I am encountering an issue with my code that is supposed to display parsed radar data on a Mapbox GL JS map using WebGL. While I have successfully managed to render the general radar shape on the map, the rendering is incorrect. Instead of drawing rectangl ...
I have a website where I store my content in a data.js file and pass it to my components using props. Everything is working correctly, except for my .svg files. When I try to display them, they do not appear. However, if I change the extension of the image ...
In my jQuery ajax code, I created a FitnessPlanDay: // Add Day ajax $('#addDay').on("click", function() { $.ajax({ url: '@Url.Action("AddDay")', type: 'POST', ...
Issue I'm Facing I'm currently working on a project that involves using icons extensively. Instead of manually adding a Fontawesome icon in every script, I have created a functional component that handles the rendering of icons based on given pr ...
I'm attempting to dynamically reload a section of my HTML with new data fetched through AJAX. Within the code, there is a loop that iterates over clients: {% for client in clients %} After making an AJAX request and receiving updated client informa ...
I am looking to streamline the options in my form based on the car and transmission selected. I have set up the form, but I am struggling with the JavaScript code. I need help figuring out how to only display certain color options when Car 1 is chosen alon ...