CODEWITHSUNDEEP
javascriptangularangular-material2
its me
its me

Reputation: 542

Form validation is not working in angular?

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

Upvotes: 2

Views: 2798

Answers (3)

AVJT82
AVJT82

Reputation: 73337

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

Upvotes: 1

Shadowlauch
Shadowlauch

Reputation: 621

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>

Upvotes: 0

Nitheesh
Nitheesh

Reputation: 19986

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

Upvotes: 0

Related Questions