Display errors on fields with global validation

Question

I want to implement a global validation on a form and change the color of some inputs according to this validation.

I have three fields. Two fields are required only if the value of the first field is 'test'.

Here is what I implemented:

function typeValidator(form: FormGroup) {
  const type = form.controls['field1'].value;
  if (type === 'test') {
    const field2 = form.controls['field2'].value;
    const field3 = form.controls['field3'].value;
    return (!field2 || !field3) ? { requiredIf: true } : null;
  }

  return null;
}

Regarding the HTML:

<mat-form-field color="accent">
  <mat-select formControlName="field1" placeholder="Field1">
    <mat-option value="test">Test</mat-option>
    <mat-option value="other">Other</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field color="accent">
  <mat-select formControlName="field2" placeholder="Field2">
    <mat-option *ngFor="let element of elements" [value]="element.id">{{element.name}}</mat-option>
  </mat-select>
</mat-form-field>

Validation works fine but I wanted to change the color to orange for field2 when I have a validation error of type requiredIf for the form.

Thanks for your help. Thierry

DevEng · Accepted Answer · 2018-07-19 15:52:03Z

1

Add typeValidator as a custom validator to the fields you want. You can check if a form control have a custom error by myFormControl.hasError('myError') That conditional can be used in class statements to add / remove a class based on the error state.

answered Jul 19, 2018 at 15:52

DevEng

1,2442 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thierry Templier Over a year ago

Thanks for your answer! But the global validation error is set on the form group itself... Is the error set when the type validator is called? Could you add some sample code for your approach? Thanks!

DevEng Over a year ago

With FormGroup you can just use the same method myFormGroup.hasError('myError') . If your typeValidator returns requiredIf: true then it sets the error for the FormGroup. Here is an example stackblitz.com/edit/angular-w3wqeo

Collectives™ on Stack Overflow

Display errors on fields with global validation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related