Form validation is not working in angular?

Question

I want to check whether the dropdown is empty.

Need to show the required message and

If not empty, enable the submit button.

If empty, disable the

Answer 1

You have to insert the validator into the form builder object.

Have a quick look at:

https://angular.io/guide/reactive-forms#validatorsrequired

this.heroForm = this.fb.group({
  name: ['', [Validators.required] ],
});

As for the button:

<button type="submit" [disabled]="!form.valid"  mat-button cdkFocusInitial>Add</button>

Answer 2

You are currently assigning formcontrols to your formcontrol, whereas you want to assign value to your form controls. Below you are assigning form control name to formcontrol name:

WRONG:

name = new FormControl('', Validators.required);

this.myForm = this.formBuilder.group({
  'name': [this.name, Validators.required],
  // ...
});

so instead, just declare name, do what you want with the value, then assign that value to your form control...

CORRECT:

name: string;

this.myForm = this.formBuilder.group({
  'name': [this.name, Validators.required],
  // ...
});

Then just add [disabled]="!myForm.valid" on your submit button.

As for the other question, by default Angular material doesn't show error message unless the field has been touched, so you need to have a custom error state matcher that shows the error even when field is not touched (if that is what you want):

import {ErrorStateMatcher} from '@angular/material/core';

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control.invalid);
  }
}

and in your TS, declare a error state matcher:

matcher = new MyErrorStateMatcher();

and use in template:

<mat-select formControlName="name" ... [errorStateMatcher]="matcher">

Here's your

StackBlitz

Answer 3

To make the submit button disabled (link)

<button type="submit" [disabled]="!myForm.valid" mat-button cdkFocusInitial>Add</button>

In order to check whether the dropdown is empty or not, you need to make the form fields required like

this.myForm = this.formBuilder.group({
  'name': [this.name, Validators.required],
  'symbol': [this.symbol, [Validators.required]]
});

Inorder to show the error highlight you need to add an ngClass in the templete like.

[ngClass]="{'error': myForm.controls.name.valid == false}"