Angular form button not enabling upon validated form

angular form validation
angular 6 disable button if form invalid
angular 6 disable button if input empty
angular reactive form validation disabled field
angular form validation on submit
angular 7 form validation
angular 6 set form invalid
angular form invalid but no errors

I'm following along with the fireship tutorial while making some changes but my submit button doesn't seem to switch from disabled to enable when my form validation should return true.

this is what i have so far for my sign-in in html

<form [formGroup]="loginForm" novalidate>
  <mat-form-field>
    <input matInput type="text" placeholder="email" #email required >
  </mat-form-field>
  <mat-form-field>
    <input matInput type="password" placeholder="Password" #password required>
  </mat-form-field>
  <div class="d-flex flex-column align-items-center">
    <!-- Calling SignIn Api from AuthService -->
      <button mat-raised-button  class="button is-success w-100" type="submit" 
        (click)="checkSignIn(email.value, password.value)">
        Continue
      </button>
  </div>
  <div *ngIf="email.invalid || password.invalid" class="notification is-danger">
    Something isn't right with the Email or Password
  </div>
</form>

and in my ts

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

  // Use getters for cleaner HTML code
  get email() {
    return this.loginForm.get('email')
  }

  get password() {
    return this.loginForm.get('password')
  }
  checkSignIn(email, password) {
    if (this.authService.SignIn(email, password))
    {

    this.authService.SignIn(email, password);
    console.log("email or password is wrong");
    }
  }

The console log is able to display "email or password is wrong" when i'm keying in a wrong user credentials if i remove [disabled]="!loginForm.valid" from the Continue button. I am also able to successfully get into the next page if user is logged in successfully. However when I do disable if form is not valid, it doesn't seem to enable itself when I've keyed in an email and filled the password. No error message as well.

What could I have missed that's preventing the login form validation

As i see, you mixed Template-driven form and Model-driven(Reactive) form. I think, that's the main problem in your case. This code could be much simpler.

Your template should be:

<form [formGroup]="loginForm" (ngSubmit)="checkSignIn()">
  <mat-form-field>
    <input formControlName="email" name="email" matInput type="text" placeholder="email">
  </mat-form-field>
  <mat-form-field>
    <input formControlName="password" name="password" matInput type="password" placeholder="Password">
  </mat-form-field>
  <div class="d-flex flex-column align-items-center">
    <button mat-raised-button  class="button is-success w-100" type="submit" [disabled]="!loginForm.valid">
      Continue
    </button>
  </div>
  <div *ngIf="!loginForm.valid" class="notification is-danger">
    Something isn't right with the Email or Password
  </div>
</form>

Your component should be:

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

checkSignIn() {
  if (this.authService.SignIn(this.loginForm.value.email, this.loginForm.value.password))
  {
    this.authService.SignIn(this.loginForm.value.email, this.loginForm.value.password);
    console.log("email or password is wrong");
  }
}

As you can see, your code could be much more simple. Also it solves your problem.

More information about Reactive forms could be found here: https://angular.io/guide/reactive-forms

Valid and Invalid in Angular Forms, In Angular one of most common ways to validate forms is to disable the submit button. <button type="submit" [disabled]="form.invalid">SEND</button> result and depending on that result we either enable the button or not. Jun 3, 2018 · 3 min read In Angular one of most common ways to validate forms is to disable the submit button. It’s a nice way (alongside with helpful messages) to indicate the user that something is not right in the form. So to disable the button we use something like this

in Angular 2 to all rest of versions you can use below code In html file change and add [disabled]="loginForm.form.invalid" only.

<form #loginForm="ngForm"> 
  <button  [disabled]="loginForm.form.invalid" mat-raised-button  class="button is-success w-100" type="submit" 
    (click)="checkSignIn(email.value, password.value)">
    Continue
  </button>
</form>

In ts file add this:

loginForm : FormGroup;

Only Enabling the Submit Button if the Form is Valid, Recipes with Angular.js. Menu You wish to disable the Submit button as long as the form contains invalid data. Solution. Use the $form.invalid state in combination with a ng-disabled directive. invalid and friends are very useful to cover all kinds of use cases which focus on the form as a whole instead of individual fields. Dont forgot to import form module. import { FormsModule } from '@angular/forms'; In this article we have discussed about form validation, basically disabling submit button until all mandatory fields are filled. Related Info. 1. Share data between components using a service file. 2. Create reusable component and share data between them. 3.

Want to add to the first answer, your form also needs

(ngSubmit)="loginUser()

something like this. And in Angular form Validation, you use something like this for error message for both email and password.

for Email:

<div class="alert alert-danger m-0 text-left animated shake fast"
    *ngIf="loginForm.get('email').hasError(validation.type) && (loginForm.get('email').dirty || loginForm.get('email').touched)">

and in your ts file, change

this.loginForm = this.formBuilder.group({
            email: new FormControl(
                '',
                Validators.compose([
                    Validators.required,
                    Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
                ])
            ),
            password: new FormControl(
                '',
                Validators.compose([Validators.required, Validators.minLength(5)])
            )
        });

And lastly, nee to add formControlName="email"

Angular Reactive Forms: trigger validation on submit, Angular makes working with forms a blast, but it also promotes one unfortunate Angular forms is that I can track their validation states very easily: in Angular forms is to make the button disabled based on the form's validity:. When we mark a control as disabled, Angular excludes its value and won’t take it into account when running the validation process. Disable control If you need the complete form value including the disabled controls, you can use the form’s getRawValue() method.

Angular techniques: Improve submit button's UX by NOT disabling it., The buttons don't activate this property when clicked, only the inputs. To make the next examples more clear, I will not add this line on the click handler for add()  If the value is not “USA” (as defined in our contructor), reset the state control to clear the input value and validation flags and then disable the control too. Else, if the value is “USA”, enable the state control. The enable () and disable () methods are simply wrappers for boolean properties on the FormControl.

Working with Angular 4 Forms: Nesting and Input Validation, Validate form on submission in reactive-form FormGroup #14527. Closed I guess disabled button should be the expected behaviour while form is invalid. angular-automatic-lock-bot bot locked and limited conversation to  Disable enable form submit button. We display a form and then disable the submit button until user enters the data as per requirement and the data validation is completed. Note that we are using all client side JavaScript validation here. Once all data are validation is passed then we will display the button ( or enable it ) for the user to submit the form.

Validate form on submission in reactive-form FormGroup · Issue , The same holds true when working with forms in Angular—the basics remain we're not going to focus on creating custom components that act like form controls, there They also include a button that will take you to a form to create a new record. We'll look at how to add validation and alert the user about invalid fields. ng-disabled – The ng-disabled AngularJS directive will disable the Submit Button and enable only when the expression to be tested returns TRUE. $invalid – The Submit Button will be enabled only if the $invalid property of the Form is FALSE.