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”.
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>
Advertisement
Answer
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])