[Ionic 4] Form validation, invalid style

Ionic Framework
1

I’m using Reactive Forms to build forms in an Ionic 4 beta 7 project. Validations are working correctly but invalid styles are not reflected in the forms.

After introducing an invalid value in an input, Inspecting the DOM I see that “ion-invalid” and “ng-invalid” classes are applied to the ion-input element, but the red outline doesn’t appear.

Does Ionic 4 support angular form validations? Is this a feature coming in future betas?

2

you may want to check the corresponding ‘module.ts’ file to make sure that it include " FormsModule"

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    MsgMorePageModule,
    RouterModule.forChild(routes),
    TranslateModule.forChild()
  ],
3

I have imported both FormsModule and ReactiveFormsModule. It seems more like a styling problem.

As you can see in the next code extracted from de Chrome debugger, Angular correctly applies the “ng-invalid” class on the ion-input element, but the red underline doesn’t show up.

<ion-input formcontrolname="code" type="number" ng-reflect-type="number" 
           ng-reflect-name="code" 
           class="ng-pristine ng-invalid in-item hydrated ng-touched ion-pristine ion-invalid ion-touched">
     <input type="hidden" class="aux-input" name="ion-input-1" value="">
</ion-input>

I was expecting a default behaviour for the ng-invalid class in the new Ionic components. Do we have to set the styling for this classes?

4

Just noticed that there is an open issue regarding this problem:

Hope it get’s corrected soon.

5

Make sure the CSS is not overwritten and that it is not nullified by other styling. For example changing a border color has no point when a different class removes the border altogether.
You should be able to fix this with custom CSS.

6

Same issue here, I though it was in my app only :frowning:

7

A simple workaround:

<ion-item [class.ion-invalid]="username.hasError('required')">

This works because the --highlight-background variable is updated when ion-item has the class ion-invalid.

1 Like