Issues with form validation in Angular reactive forms are causing problems

I recently created a complex reactive form by following the guidelines from this source on how to handle validation in Angular 9.

After posting my code in StackBlitz, I ended up with three links:

If these links are not working for you, please let me know where I can find the correct ones.

Here is an excerpt of my app.module.ts file:

// Code goes here

And here's a snippet from my app.component.ts file:

// Code goes here

This issue arises when users try to submit a form without completing all necessary fields. The validation process should accurately detect any missing information and prompt users to fill out all required sections before submitting the form.

javascriptangulartypescriptangular9

Answer №1

The functionality works exactly as intended: the error message will only be displayed if the field has an error of "required" and if the field is not pristine (meaning it has been modified):

<p *ngIf="checkoutFormGroup.get('customer').get('firstName').hasError('required') && !checkoutFormGroup.get('customer').get('firstName').pristine">
    Firstname is required
</p>

When clicking on the submit button, the control does not become dirty, so there is no reason for the error message to appear.

If you would like the message to appear even after clicking submit, you can create a template reference to the form element like this:

<form [formGroup]="checkoutFormGroup" (ngSubmit)="onSubmit()" #formGroupRef="ngForm">

and adjust the condition to:

<p *ngIf="checkoutFormGroup.get('customer').get('firstName').hasError('required') &&
    (checkoutFormGroup.get('customer').get('firstName').dirty || formGroupRef.submitted)">
        Firstname is required
</p>

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 could be causing the issue with my connection.query when using mysql in node.js?

Purpose: The goal is to perform a basic query on the database. Expected Outcome: The console should display "please print something!" along with the results of the query. Actual Outcome: Sadly, nothing appears on the terminal screen. Issues: No error me ...

javascriptmysqlnode.jsnpm

Generate a JSON array containing objects consisting of a combination of string and boolean values

My goal is to generate a list containing objects with names and boolean values by utilizing AJAX. This process is initiated in the following manner: $('.si-accordion').click(function () { $(this).siblings('.accordion_tab&apo ...

javascriptjqueryhtmlajax

Switching Logo Image when Menu Button is Clicked

I'm looking to adjust the color of my logo when the menu button is clicked to match the overlay style. Currently, I managed to switch from a black logo to a white logo. However, when attempting to close the menu, it doesn't revert back to the bl ...

javascripthtmlcss

The return type of a server-side component in NextJS 14 when it is asynchronous

When using NextJS 14, I encountered a problem with the example provided in the documentation. The example is within the Page component, typically typed as NextPage. However, this type does not support the use of async await server components. In my case, ...

javascriptreactjsnext.js

What is the best way to retrieve the index of the chosen option from a select element in Angular when

My Angular application includes a simple <select> element using Material design: <mat-form-field> <mat-label>Type</mat-label> <mat-select placeholder="Type" formControlName="type" name="type" id="name"> <mat-option ...

htmlangularformsangular-material

When the React functional component changes its state, it triggers the un-mounting and re-mounting of its parent

I created a functional component that allows for toggling the visibility of a password field using a small button that switches between closed and opened eye images. The issue I'm facing is that even though the parent does not have any affected state ...

javascriptreactjsreact-functional-componentrerenderreact-component-unmount

Unexpected empty page upon attempting to load JSON data from a text file

The challenge I'm facing is loading names from an HTML file that contains JSON data. Oddly enough, the page appears blank/white without any error messages in the Firefox debugger. Both test.html and persondb.html are located on the same server. test ...

javascriptjsonajax

Generating dynamic content

I require assistance with a programming issue. I am working with two separate components: Stage and Executor. Within the Stage component, I am attempting to create new elements based on input parameters, while in the Executor component, I set these paramet ...

htmlangulartypescriptng-container

Adding items to an array within a jQuery each loop and performing a jQuery ajax request

I am trying to loop through an array, push the results into a JavaScript array, and then access the data outside of each loop and AJAX call. Can anyone explain how to do this? This is what I have attempted: var ides = ["2254365", "2255017", "2254288", ...

javascriptjqueryarraysajax

Tips for transferring information between routes in Node.js using Express.js

How can I add a specific attribute to the request object and access it from another route after redirection? Below is an example of what I am looking for: const express = require('express') const app = express() app.get('/test1',(req, ...

javascriptnode.jsexpresssessionrequest

Display and view .dwg files using Javascript, HTML, and Angular

Looking for a way to upload and preview .dwg format images on a page created using js/HTML/angularjs or Angular 2+? I've attempted to use a CAD viewer js library, but the lack of documentation has made it challenging. Has anyone successfully implement ...

javascripthtmlangularjsangular

How can you retrieve a value from a JavaScript closure function?

I'm struggling with getting a value from a closure function in Javascript. In my initial attempt, I placed the return statement inside the inner function, but it was not effective. Then, I tried moving the return statement to the outer function, howev ...

javascriptangularjsfunctionprotractor

Serve both .ts and .js files to the browser using RequireJs

In my ASP.NET Core Project, the following files are present: greet.ts export class WelcomMesssage { name: string; constructor(name: string) { this.name = name; } say(): void { console.log("Welcome " + this.name); } } GreetExample.ts import * as ...

typescriptrequirejs

Tips for importing a library in a TypeScript file that expands a JavaScript prototype

After following the instructions provided in this question, I am experimenting with integrating Moment.js to enhance the capabilities of the Date prototype within a TypeScript project. The process of extending the Date prototype appears successful, as out ...

typescriptimportmomentjsprototype

Retrieving information within a loop through the utilization of a left join操作。

Presently, I am utilizing a while loop to fetch user comments from a MySQL table and applying a conditional class to the buttons within the comment div. Each comment contains two buttons: thumbsup button thumbsdown button I aim to assign the class name ...

javascriptphpjqueryajax

Jest does not recognize AnimationEvent as a defined element

I am currently facing an issue while attempting to simulate an animationEvent for a test within my Angular application. The error message I receive is: ReferenceError: AnimationEvent is not defined. Given that this feature is experimental, it seems like ...

javascriptjestjscss-animations

Disappear button once all elements have been added to the array - utilizing redux

I currently have a list of locations with the option to add them all to another array using an 'ADD all button'. The adding functionality works perfectly, but I now need to hide the 'ADD all button' after it has been clicked. So far, I ...

javascriptreactjsreact-redux

What is preventing a mapped type from completely resolving a lookup with a generic yet finite key?

Let's break down the issue at hand: type Animal = 'dog' | 'cat'; type AnimalSound<T extends Animal> = T extends 'dog' ? 'woof' : T extends 'cat' ? 'meow' : never; cons ...

typescript

The margin of the parent container is influencing the margin of the child element

Purple Working on displaying a rectangle shape in a browser using divs in my React project. Everything works fine, but when I add margin to the parent base and then draw the boxes, there's some space between the mouse cursor and the actual box. The ...

javascripthtmlcssreactjs

What is the best approach for replacing numerous maps within an rxjs observable array?

Is there a more efficient way to retrieve only 3 items from an array? If you have any suggestions, I would appreciate it! Thank you. loadAsk!: Observable<any[]>; this.loadAsk.pipe( map(arr => arr.sort(() => Math.random() - .5)), map((item ...

typescriptrxjs