javascript - 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

Answer 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