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=" " 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.