Angular Form Required not functioning as expected

I have encountered an issue with my form where the required attribute does not seem to work properly. Even when I leave the input field empty, the form still gets submitted. Here is a snippet of my code:

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <input type="text" class="form-control" id="inputEmail3" placeholder="test" 
        required
        name="test">
    </div>
  </div>

Below is the opening tag for my form:

<form class="form-horizontal" (ngSubmit)="onSubmit()">

And here is the submit button tag:

<button type="submit" class="btn btn-default">Save</button>

Answer №1

Make sure to include ngNativeValidate within your form tag:

<form ngNativeValidate class="form-horizontal" (ngSubmit)="onSubmit()">

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

Struggling to integrate a JavaScript sdk with an Angular2 application due to missing dependencies

I've been struggling to incorporate the Magic: The Gathering SDK library into my Angular2 application. I've tried various methods, but nothing seems to work seamlessly. When I attempt to import the library using TypeScript like this: import { } ...

Angular is set up to showcase every single image that is stored within an array

I am having trouble displaying the images from the "image_url" array using a for loop. The images are not showing up as expected. Here is the content of the array: image_url: [ 0: "https://xyz/16183424594601618342458.5021539.jpg" 1: "https://xyz/1618342459 ...

Simulated FileList for Angular 5 App Unit Testing

Imitation FileList In my pursuit of writing a unit test (Angular5), I have encountered the need for a FileList. Despite researching extensively, I have been unable to uncover any clues or solutions. I am starting to question whether this is even feasible ...

How can I make CSS text-overflow ellipsis trigger a pop-up to display lengthy text when clicked?

I'm encountering an issue with a lengthy sentence in a table cell which I've truncated using text-overflow to display ellipsis. Is there a way to enable users to click on the dots (...) and view the full text in a popup window? table { wi ...

Cookies are not being sent by Angular 2

Currently, I am working on a project that involves frontend development using angular 2 and backend with symfony as the API. However, I am facing an issue where I need to send the PHPSESSID when making a request to symfony, but it is not happening as expec ...

Error message on Cypress with TypeScript: No test specification files detected

Encountering the error "Unable to run because no spec files were found, even though there is a .ts spec file in Cypress. Execute the command below in the terminal: npx cypress run --spec="./cypress/integration/specs/Test1.spec.ts". Attempted to run the t ...

What are the steps for creating and deploying a project that utilizes asp.net core on the server-side and Angular on the client-side

My latest project combines asp.net core 5 and angular 15 technologies for the backend and frontend, respectively. The asp.net core MVC portion of the project is contained in a dedicated folder named serverApi, while the angular part is generated in another ...

Retrieve information prior to CanActivation being invoked

As I develop a web application utilizing REST to retrieve data (using Spring Boot), the server employs cookies for authenticating logged-in users. Upon user signing in, I store their information in the AuthenticationHolderService service (located in root ...

Angular Resolvers - Achieving Array Success Without Observables. What's the secret behind this accomplishment?

When implementing resolvers in Angular routing, the official documentation suggests using objects in the routing configuration and utilizing an observer in the component to access the resolved data from the activated route. However, I came across a differ ...

Creating a fresh ngx-translate pipeline (comparing pure and impure methods)

Edit: I am looking to enhance the functionality of ngx-translate's pipe by extending it. Here is an example of how I achieved this: import { Pipe, PipeTransform } from '@angular/core'; import { TranslatePipe } from "@ngx-translate/core"; @ ...

What could be causing my for loop to not function properly within the ngOnInit lifecycle hook?

I am attempting to create a nested loop structure in order to access an array that is inside an object within an array of objects, and then store this data into a new array. My issue arises as the first loop executes successfully but the second one does no ...

What are the steps to successfully submit my form once all the validation requirements have been met?

I successfully completed the validation process, but I am encountering an issue when trying to submit the form. An error message pops up indicating that there is an error related to a specific field (e.g., special characters being used). However, even when ...

I am experiencing an issue where React Hook Form is not showing objects in the console upon submission

My goal is to use react-hook-form with two material UI text fields to gather data and display it in the console. However, when I click the submit button, nothing shows up in the console.log as expected. Here is my code: import React from 'react&apos ...

What is the resolution process for importing @angular/core/testing in TypeScript and what is the packaging structure of the Angular core framework?

When using import {Injectable} from '@angular/core';, does the module attribute in package.json point to a file that exports injectable? Also, for the format @angular/core/testing, is there a testing folder within @angular/core that contains anot ...

Is it possible to launch my MEAN application on a personal server running Debian and nginx?

After successfully creating my first app using the MEAN stack (Mongo, Express, Angular 2/4, Node), I am facing an issue where it only functions on my local environment. When I initiate the client (frontend) part with 'ng serve,' it works on local ...

Mastering the proper implementation of observables, async/await, and subscribing in Angular

I have a JSON file located at assets/constants/props.json. Inside this file, there is a key called someValue with the value of abc. The structure of the JSON file can be seen in the following image: https://i.stack.imgur.com/MBOP4.jpg I also have a serv ...

Head to the "/unauthorised" route in Angular while maintaining the current URL intact

I have a security guard that directs the user to an "/unauthorised" route when they do not have permission to access the current page (which could be any page). @Injectable() export class PermissionGuard implements CanActivate { constructor(private reado ...

How to configure mat-sort-header in Angular Material for mat-table

My current table is created using Angular Material: <mat-table *ngIf="!waiting" class="table-general table-summary" #table [dataSource]="dataSource" matSort> <mat-header-row class="header_row" *matHeaderRowDef="headerKeys"></mat-header ...

Updating the Angular2 function in the main app component causes the current component to be reset

I developed an application that has the following structure: app.component.ts import { Component } from 'angular2/core'; import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; import { NgClass } from &apos ...

iterating through the checked values in Angular 4

I need assistance in writing a loop using TypeScript to send each checked employee as a parameter to the postCouncilAbsence function. Can anyone help? component.ts: onattendanceSave(form:NgForm){ this.index = this.attendanceForm.value console.log ...