Angular 2 forms are displaying ngvalid when input fields are marked as nginvalid

The form displays ngvalid because I have included the code like this:


<form novalidate class="pop-form" (submit)="signUp()" #regForm="ngForm"> 
    <div class="group">
    <input type="text" [(ngModel)]="signUpData.name"
           [ngModelOptions]="{standalone: true}"
           placeholder="&nbsp;"  required=""
           id="upName" name="upName" #upName="ngModel">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>{{'Name' | translate}}</label>

    <div *ngIf="upName.errors && (upName.dirty || upName.touched)"
         class="alert alert-danger alert-new">
      <div [hidden]="!upName.errors.required">
        {{'Enter username and password' | translate}}
      </div>
    </div>
    </div>
......................
...................
</form>

The console below shows

There are invalid elements in the form but it is showing as valid. How can this issue be resolved? It affects when disabling a button when the form is invalid.

angularformstypescriptvalidation

Answer №1

I'm wondering why you've chosen to utilize 'ngModelOptions' in this context.

According to the documentation:

The 'standalone' property defaults to false. When set to true, ngModel will not associate itself with its parent form and will behave as though it is not part of the form. This can be useful if you have form meta-controls, such as form elements nested within the form tag that manage the form's display but do not contain form data.

It appears that this may not align with your intentions. Is there a specific reason for using it?

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

The CSS formatting is not being properly applied within the innerHTML

I have a scenario where I am trying to display a Bootstrap card using innerHTML in my TS file, but the styles are not being applied to this content. I suspect that the issue might be because the styles are loaded before the component displays the card, cau ...

javascripthtmlcssangulartypescript

`How Does valuePropName Function?`

When submitting a form with a checkBox component without setting the valuePropName, the value of the checkBox is returning as undefined. <Form.Item name="remember" valuePropName="checked"> <Checkbox>Remember me< ...

reactjsformscheckboxantd

NextJS introduces a unique functionality to Typescript's non-null assertion behavior

As per the typescript definition, the use of the non-null assertion operator is not supposed to impact execution. However, I have encountered a scenario where it does. I have been struggling to replicate this issue in a simpler project. In my current proj ...

typescriptnext.jstranspiler

Why aren't my arrays' characteristics being recognized when I create an instance of this class?

There is a puzzling issue with the arrays in my class. Despite creating them, when I try to access them in another class they are not recognized, only the otherProp is visible. To make matters worse, attempting to add elements to the arrays results in an ...

arraysangulartypescript

Pass the parameter name to the controller using the Change function in Angular 2

When creating a string from multiple inputs, I have a requirement to include the name of the input element as the second parameter in a function. <input [(ngModel)]="programSearched" name="programSearched"(ngModelChange)="stringBuilderOnChangeMaker(pro ...

angulartypescript

Setting up Webpack to compile without reliance on external modules: A step-by-step guide

I am facing an issue with a third-party library that needs to be included in my TypeScript project. The library is added to the application through a CDN path in the HTML file, and it exports a window variable that is used in the code. Unfortunately, this ...

javascripttypescriptwebpack

Is there a way for me to define the type of a prop based on the type of another prop?

I'm not entirely certain how to phrase this inquiry, or which terminology to employ, so I'll do my best in presenting it. My intention is to develop a component that functions on an array of elements and triggers a render function for each eleme ...

reactjstypescript

Utilize Angular2 to dynamically add new routes based on an array register

Currently, I am utilizing Angular2 for the frontend of my project and I am faced with the task of registering new Routes from an array. Within my application, there is a service that retrieves data from a server. This data is then stored in a variable wit ...

typescriptangularroutes

Retrieving JSON data through HttpClient in Angular 7

I am attempting to retrieve information from this specific URL. The data obtained from this URL is in JSON format. This particular file is named data.services.ts: import { Injectable } from '@angular/core'; import { HttpClient } from '@an ...

javascriptjsonangulartypescriptapi

Learn how to store the outcomes of an HTTP operation within array.map() in JavaScript

Having read numerous articles, I am a complete beginner when it comes to async programming and struggling to grasp its concepts. My goal is to map a filtered array of objects and return the result of a function (an amount) to set as the value of pmtdue. De ...

javascriptangularasync-awaites6-promisearray.prototype.map

Enhancing HTML through Angular 7 with HTTP responses

Sorry to bother you with this question, but I could really use some help. I'm facing an issue with updating the innerHTML or text of a specific HTML div based on data from an observable. When I try to access the element's content using .innerHTM ...

javascriptangulartypescript

How can we enforce that only a certain type of ReactElement is allowed to be passed as props to a Component in TypeScript?

eslint and vscode seem to have trouble detecting validation errors when passing incompatible ReactElement types. Despite searching through documentation and examples, I haven't been able to find a solution that works. // Footer.tsx export interface ...

reactjstypescript

Choosing Vue select options depending on a condition

I am working on a dropdown template with Vue.js and have encountered some challenges. Here is the basic structure of my dropdown: <select v-model="selectedClient" class="stat-select text-u-c"> <option disabled value="">Please select a Client ...

typescriptvue.jsvuejs2

Experimenting with parallelism using TypeScript/JS

Currently, I am tackling a TS project that involves testing concurrent code and its interactions with a database, specifically focusing on idepotency. My goal is to ensure that multiple requests modifying the same resource will either apply changes correct ...

javascripttypescripttestingconcurrency

Learn how to send error logs from an Angular frontend to the backend using a custom API or any other method to store them in the Serilog table in MSSQL

Is there a way to log errors from an Angular frontend to a backend using a custom API or any other method that can send the data to Serilog's SQL sink table in MSSQL? My application utilizes multiple APIs from various third-party resources, and I need ...

angularloggingserilog

Custom validation using JQuery is ineffective

Here is the HTML code snippet: <select class="validateCardNotExpired" id="order_credit_card_expiration_month"> <option value="1">Jan</option> <option value="2">Feb</option> .......... </sele ...

jqueryvalidationhandlerparameters

Tips for creating a carousel with Angular 9 to showcase numerous items

I've got this code snippet that I'm working on. I want to incorporate a Carousel feature using Angular 9 without relying on any external libraries. Currently, all the data items are appearing in a single row (they are exceeding the specified bor ...

angulartypescriptcarouselangular8angular9

Experiencing inaccuracies in Magento's item validation process when checking the quantity of items being added to the cart

Upon entering a text string in the quantity field of the "Add to Cart" input box, Magento does not display an error message but instead considers it as a quantity of "1". Is there a way to modify this behavior and have the validation system mark strings ...

phpjavascriptvalidationmagento

Using prevState in setState is not allowed by TypeScript

Currently, I am tackling the complexities of learning TypeScipt and have hit a roadblock where TS is preventing me from progressing further. To give some context, I have defined my interfaces as follows: export interface Test { id: number; date: Date; ...

javascriptreactjstypescript

Is there a way to retrieve the resolved data within the route definition in Angular?

I am looking to execute some actions within the route definition once the lazyloaded module is loaded. The route includes a resolver called UserDataResolverService. How can I retrieve and utilize the resolved data within the route definition? { ...

angular