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 submit button. Below is my html

Below is my html

<form  [formGroup]="myForm"  (ngSubmit)="save()" >
<mat-form-field>
  <mat-select formControlName="name" placeholder="Element List"  (selectionChange)="elementSelectionChange($event)" required>
    <mat-option *ngFor="let element of Elements" [value]="element.name">
      {{ element.name }}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="myForm.hasError('required', 'name')">Please choose an name</mat-error>
</mat-form-field>
<mat-form-field>
  <mat-select  formControlName="symbol"  placeholder="Symbol List" required>
    <mat-option *ngFor="let element of selectedElementSymbol" [value]="element.symbol">
      {{ element.symbol }}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="myForm.hasError('required', 'symbol')">Please choose an symbol</mat-error>
</mat-form-field>

<div mat-dialog-actions>

  <button mat-button (click)="onNoClick()">Cancel</button>
<button type="submit"  mat-button cdkFocusInitial>Add</button>
</div>
</form>

below is my component

export class DialogOverviewExampleDialog {

  myForm: FormGroup;
  symbol = new FormControl('', Validators.required);
  name = new FormControl('', Validators.required);
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private formBuilder: FormBuilder) {

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

  save() {

    console.log(this.myForm.value);
  }

}

updated demo here

AVJT82 · Accepted Answer · 2018-03-28 17:13:51Z

1

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

answered Mar 28, 2018 at 17:13

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

its me Over a year ago

need one help @AJT_82 only when user touch that time we need to show required message

AVJT82 Over a year ago

@itsme well, just add a control.touched to the error state matcher :)

its me Over a year ago

hai need one help when i do edit data is not getting populated (i made some changes) . stackblitz.com/edit/angular-talrct-nkmffh?file=app/… .help m eout

its me Over a year ago

help me out stackoverflow.com/questions/49927779/…

Nitheesh · Accepted Answer · 2018-03-28 12:23:07Z

0

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}"

answered Mar 28, 2018 at 12:23

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

4 Comments

its me Over a year ago

i added above code but its not working can you pls help me out ..here is the link stackblitz.com/edit/…

its me Over a year ago

did u check the demo @Nitheesh

its me Over a year ago

i am not getting any error but above code not working

its me Over a year ago

help me out stackoverflow.com/questions/49927779/…

Ricardo · Accepted Answer · 2018-03-28 12:47:59Z

0

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>

edited Mar 28, 2018 at 12:47

Ricardo

2,48722 silver badges35 bronze badges

answered Mar 28, 2018 at 12:19

Shadowlauch

6211 gold badge6 silver badges13 bronze badges

1 Comment

its me Over a year ago

here is the link can you help me on this stackblitz.com/edit/…

Collectives™ on Stack Overflow

Form validation is not working in angular?

3 Answers 3

StackBlitz

4 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related