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 https://i.sstatic.net/32d9I.png

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.

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

Terminal displays Typescript variable syntax error

Recently, I've been delving into TypeScript using Visual Studio Code. However, I've encountered a perplexing syntax error that stems from how I've defined a variable. Here's an example of my declaration: let year:number = 2015 My term ...

Coverage of code in Angular2 using Qunit

Is there a reliable code coverage measurement tool or framework that can easily be integrated to assess the code coverage of Angular2-TypeScript code with QUnit tests? I have come across some frameworks like remap-istanbul, blanket.js etc., but these fram ...

Why is it necessary to merge an interface with a function when using the new keyword?

Assuming that the setting noImplicityAny is enabled. Consider the following: function Bar() { this.f = 100; } The following code snippet will not function as expected: let x = new Bar(); An error message will be displayed: 'new' expre ...

Validation of input type number restricted to only numeric values

Is there a way to validate an input field with type="number" using only Reactive Forms in Angular, ensuring that the value is either numeric or null without utilizing directives? Only numbers [0-9] and . are permitted, no other characters. My Approach: ...

New in the latest release of Angular2 (rc6): Expansion of RouterOutlet with the addition of the

Currently, I am working with angular2 rc6 and I'm open to utilizing the latest release that has been announced. My goal is to set up the router outlet feature in a way that only authenticated users can access it. This piece of code below was function ...

Tips for looping through a JSON object in Angular 4 and extracting the values for Add, intA, and intB fields to populate a list

What is the best way to loop through the following JSON in a .ts file and extract the integer fields and operations like 'Add' into a list using Angular 2? let json = { "Header": null, "Body": { "Add": { "intA": "2","intB": "3" }}}} ...

Is there a way to remove trigger characters in vscode api completion function?

I am developing a vscode extension that requires custom completion for json files. I would like to know if it is possible to hide the trigger character when using autocompletions. Let me explain further : Imagine the trigger character is '.' In ...

Loading a Dynamic URL within a Component's template in Angular 2.0.0-rc.1

Is there a method for dynamically loading URLs in the templateUrl property? Similar to the code snippet below: @Component({ moduleId: module.id, selector: 'my-app', templateUrl: DynamicUrl, // Load DynamicUrl here styleUrls: [&ap ...

I am experiencing slow load times for my Angular 2 app when first-time users access it, and I am seeking assistance in optimizing its speed

Below, you'll find a snippet from my app.ts file. I'm currently working with angular2, firebase, and typescript. I'm curious if the sluggish performance is due to the abundance of routes and injected files? The application functions smoot ...

The json.parse function can be used in JavaScript, but it is not compatible with Angular

Currently, I am in the process of converting an existing JavaScript application into Angular using TypeScript. In the original JavaScript application, I have a JSON data file that is successfully read during startup. However, when attempting to read the ex ...

Encountering the error "No overload matches this call" while utilizing useQuery in TypeScript may indicate a mismatch in function parameters

My issue lies with TypeScript and types. Here is the API I am working with: export const clientAPI ={ //... getOptions: async (myParam: number) => get<{ options: Options[]; courses: any[] }>(`/courses?myParam=${myParam}`)().then((result) =& ...

Problem with Angular app not loading in IE 11 due to ES6 targeting

I have encountered an issue while developing a new application with IE11 as the target browser. When I set the target to es6, the app fails to load and displays the error shown below. https://i.stack.imgur.com/FL8BG.png However, when I switch the target ...

What is the best method to display a service property within a controller?

If we consider the scenario where I have a controller named ctrlA with a dependency called serviceB, which in turn has a property known as propertyC. My development environment involves Angular and Typescript. When interacting with the user interface, the ...

I'm encountering an error when trying to use makeStyles

Something seems off with MUI. I was working on my project yesterday and makeStyles was functioning properly, but now it's suddenly stopped working. I'm encountering an error when calling it here: https://i.sstatic.net/tBf1I.png I suspect the iss ...

Error alert: TypeScript typings issue - Naming conflict with Promise / Failure to locate name Promise

I am currently working on a client/server JavaScript application and I am facing a significant issue with Promises. It appears that they are either undefined or duplicated, and this problem seems to be related to the @types package. npm install --save @ty ...

Changing a numeric string into a number within an Angular 2 application

Looking for advice on comparing Angular 2 expressions. I have an array of data stored as numeric strings in my database and I need to convert them to numbers before applying a condition with ngClass for styling purposes. Any suggestions on how to perform ...

The parent component can successfully call the setState function, but for some reason, the

In my code structure, I have the following setup (simplified): Here is the parent component: //code... const {handleClick} = useClick; <ul> {actions.map((action: string) => ( <li onClick={() => handleClick()} key={uuidv4()}> ...

What steps should be followed to implement ng-zorro-antd?

I'm currently in the process of developing an Angular project with ng-zorro. I've followed these steps: npm install --location=global @angular/cli ng new ng-zorro-demo This Angular project includes routing. cd ng-zorro-demo/ ng add ng-zorro-antd ...

The attribute 'XXX' is not found within the type 'IntrinsicAttributes & RefAttributes<any>'

My coding hobby currently involves working on a React website using TypeScript. I recently came across a free Material UI template and decided to integrate it into my existing codebase. The only challenge is that the template was written in JavaScript, cau ...

Remove a specific NgRx node using LazyLoading technique

I am currently developing an Angular 9 application utilizing NgRx with lazy loading functionality. Upon initial app load, the state appears as follows: However, when navigating to the '/account-config' route, the state changes due to lazy loadi ...