Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Why is my Angular FormGroup Valid when a control that is marked as required is empty?

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 comes back as valid even when there is nothing selected for "triggers".

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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>

>Solution :

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])
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading