how to set value of form input fields and re-check their form validation errors

Question

:)

I'm writing an angular8 web app with angular material.

I use ReactiveForms to build a FormGroup in order to validate it's fields.

I have two fields of To Date and To Time that if I try to submit the form without them being filled, the user sees an error indicating that he needs to fill these values.

below them I have a button called Now that sets the date and time fields well.. to now :)

if I pressed submit first, got the <mat-error> messages below them that they are empty, then pressed the 'Now' button, the fields are being filled but the error messages do not go away. is there a way to re-test specifically these two form fields ?

this is my form with the relevant code of the input elements and the now button:

<form [formGroup]="queryForm" (submit)="runQuery()">
...
        <div fxLayout="column wrap">
            <div fxLayout="row wrap">
                <mat-form-field>
                    <input matInput #toDate [matDatepicker]="toDatePicker" (focus)="toDatePicker.open()" placeholder="To Date" formControlName="datePeriodTo" />
                    <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
                    <mat-datepicker #toDatePicker></mat-datepicker>
                    <mat-error>{{getError('datePeriodTo')}}</mat-error>
                </mat-form-field>
                <mat-form-field>
                    <input matInput #toTime [ngxTimepicker]="toTimePicker" placeholder="To Time" aria-label="To Time" formControlName="timePeriodTo">
                    <ngx-material-timepicker #toTimePicker></ngx-material-timepicker>
                    <mat-error>{{getError('timePeriodTo')}}</mat-error>
                </mat-form-field>
            </div>
            <div fxLayout="row wrap" fxLayoutAlign="center">
                <button mat-raised-button type="button" (click)="toDate.value=currentDate.format('D/M/YYYY'); toTime.value=currentDate.format('hh:mm a')">Now</button>
            </div>
        </div>
...
</form>

my getError() function just parses the error and shows the relevant error message:

 getError(field: string) {
    const control = this.queryForm.get(field);
    return control.hasError('required') ? 'field is required' :
        control.hasError('greaterThen') ? 'range values not valid' :
            control.hasError('lessThen') ? 'range values not valid' :
                control.hasError('min') ? 'value is below minimum' :
                    control.hasError('max') ? 'value is above maximum' :
                        !control.valid ? 'unknown error' :
                '';
  }

so in general what I want to happen, that if the are already errors visible for those form fields and I press the Now button so they are filled to current date or time.. to re-check validation and if that's not possible, just to not show these errors because they are not relevant anymore!

I know that i can specifically delete the text in the mat-error fields when I press the Now button but I would assume that angular has a.. more .. a better way to handle it ?

thanks! :)

fallerd · Accepted Answer · 2022-06-05 19:07:19Z

2

When using Angular reactive forms you need to use reactive forms API. In this particular case you can use patchValue https://angular.io/api/forms/FormGroup#patchvalue as it can set only subset of values.

I would also suggest to move your click event handler into a separate function:

<button mat-raised-button type="button" (click)="setCurrentDate()">Now</button>

and in your component

private setCurrentDate() {
   this.queryForm.patchValue({
      datePeriodTo: currentDate.format('D/M/YYYY'),
      timePeriodTo: currentDate.format('hh:mm a')
   });
}

edited Jun 5, 2022 at 19:07

fallerd

1,76812 silver badges15 bronze badges

answered Jul 16, 2019 at 15:37

Andrei Mihalciuc

2,25819 silver badges14 bronze badges

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

1 Comment

ufk Over a year ago

awesome answer thanks. since I use the moment plugin for the date picker i just need to provide it with moment() object without any formatting

Andon Mitev · Accepted Answer · 2019-07-16 14:48:34Z

0

You can treat them as observables and subscribe to them, once when their value is changed set hasError to false for corresponding field

answered Jul 16, 2019 at 14:48

Andon Mitev

1,5342 gold badges19 silver badges37 bronze badges

Collectives™ on Stack Overflow

how to set value of form input fields and re-check their form validation errors

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related