I am trying to setup a basic form validation for a select.

In my constructor I have the following FormGroup

this.formSubmission = new FormGroup(
  {
    triggers: new FormControl(['', [ Validators.required]])
  }
)

I have a button on the screen to test the validity of the FormGroup and it always es back as valid even when there is nothing selected for "triggers".

When clicked the following code executes:

console.log('FormGroup Status: ' + this.formSubmission.status)

This will return VALID.

The HTML portion of this can be found here:

<div [formGroup]="formSubmission">
  <mat-form-field appearance="fill">
    <mat-label>Triggers</mat-label>
    <mat-select 
    formControlName="triggers" multiple
    >
      <mat-option *ngFor="let trigger of triggersList" [value]="trigger.TRIGGER_NAME">{{trigger.TRIGGER_NAME}}</mat-option>
    </mat-select>
  </mat-form-field>
</div>

I am trying to setup a basic form validation for a select.

In my constructor I have the following FormGroup

this.formSubmission = new FormGroup(
  {
    triggers: new FormControl(['', [ Validators.required]])
  }
)

I have a button on the screen to test the validity of the FormGroup and it always es back as valid even when there is nothing selected for "triggers".

When clicked the following code executes:

console.log('FormGroup Status: ' + this.formSubmission.status)

This will return VALID.

The HTML portion of this can be found here:

<div [formGroup]="formSubmission">
  <mat-form-field appearance="fill">
    <mat-label>Triggers</mat-label>
    <mat-select 
    formControlName="triggers" multiple
    >
      <mat-option *ngFor="let trigger of triggersList" [value]="trigger.TRIGGER_NAME">{{trigger.TRIGGER_NAME}}</mat-option>
    </mat-select>
  </mat-form-field>
</div>

• javascript
• angular
• typescript
• forms
• formgroups

Share Improve this question Follow edited Apr 29, 2022 at 15:29 Anurag Srivastava 14.5k44 gold badges3737 silver badges4646 bronze badges asked Apr 29, 2022 at 15:09 user68288user68288 78422 gold badges1616 silver badges4141 bronze badges 1

• what is the result of console.log('FormGroup value: ' + this.formSubmission.value) ? – Seega Commented Apr 29, 2022 at 15:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You defined triggers wrong.

  triggers: new FormControl(['', [ Validators.required]])

will result in triggers: array. First argument is the value, second is the validators, asyncValidators or options

what you probably meant to do is this:

triggers: new FormControl('', [ Validators.required])