Even after submitting valid values in angular fields submit button remains disabled

Question

I am trying enable the login button based on the email validations using angular's Validators.email. However, even after entering all the required fields the button is not getting enabled. I also tried using validators.minlength but there as well I am facing the same challenge. Thank you in advance for the help.

import { Component, OnInit } from '@angular/core';
import { FormGroup,  FormBuilder,  Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  myForm!: FormGroup;
  constructor(private fb: FormBuilder) { 
    this.submitForm();
  }

  ngOnInit(): void {
  }
  
  submitForm() {
    this.myForm = this.fb.group({
       name: ['', Validators.required, Validators.email ],
       password: ['', Validators.required]
    });
  }

  get name(){
    return this.myForm.get('name');
  }

}

<div fxLayoutAlign="center center" fxFlexFill class="main-div">
<mat-card fxFlex="25">
    <mat-toolbar color="primary">LogIn Page</mat-toolbar>
    <form fxLayoutAlign="stretch" fxLayout="column" class="login-form" [formGroup]="myForm">
        <mat-form-field>
          <mat-label>User Name</mat-label>
          <input FormControlName="name" matInput placeholder="name">
        </mat-form-field>
      
        <mat-form-field>
          <mat-label>Password</mat-label>
          <input matInput FormControlName="password" placeholder="password" type="password">   
        </mat-form-field>
        <button mat-raised-button type="submit" [disabled]="!myForm.valid"  routerLink="/mainPage">LogIn</button>
      </form>
</mat-card>
</div>

Hi @MishaMashina thanks for noticing that. Added the html part. — Akshay, Jan 29 '22 at 21:32

score 0 · Accepted Answer · answered Jan 29 '22 at 22:17

A couple of small issues in the code.

First, in .ts component, multiple validators should be group in as an array []. The second argument of form control is for sync validators while the third argument is for async validators. So if you don't group them by [], you're telling your formControl that Validators.email is an async validator (which it is not) due to it being separated by a comma,.

Reference: Expected validator to return Promise or Observable

So your submitForm() function should be like this:

  submitForm() {
    this.myForm = this.fb.group({
       name: ['', [Validators.required, Validators.email] ],
       password: ['', Validators.required]
    });
  }

Secondly in HTML component, a small typo due to which form controls are not bonded correctly. Form Controls in the Form Group are written as formControlName and not FormControlName, so your HTML should be like this:

 <form fxLayoutAlign="stretch" fxLayout="column" class="login-form" [formGroup]="myForm">
    <mat-form-field>
       <mat-label>User Name</mat-label>
       <input formControlName="name" matInput placeholder="name">
    </mat-form-field>
      
    <mat-form-field>
      <mat-label>Password</mat-label>
      <input matInput formControlName="password" placeholder="password" type="password">   
    </mat-form-field>
    <button mat-raised-button type="submit" [disabled]="!myForm.valid"  routerLink="/mainPage">
    LogIn</button>
 </form>

Even after submitting valid values in angular fields submit button remains disabled

1 Answers1