I’m having a problem with an input belonging to an angular form. In case the value of the input does not match the validators, the

at the bottom of the form will pop up. Let’s say it’s about errors like ‘required’ and pattern errors (for example, the input value should be hexadecimal). It is happening that the hexadecimal error does not disappear when I put a correct value, after having previously put an incorrect value. This is an example:

<form [formGroup]="form" class="form" *ngIf="editing">
  <div class="form-group">
    <div class="input-group input-group-sm" [ngClass]="{ 'has-error': form.get('fieldValue').invalid && form.get('fieldValue').dirty }">
      <input formControlName="fieldValue" class="edit-input-field" type="text" class="form-control" value="{{ viewModel.value }}"/>
      <span (click)="submit()" [disabled]="form.get('fieldValue').invalid" [ngClass]="{'disabled': form.get('fieldValue').invalid}" class="input-group-addon"><i class="fa fa-fw fa-check"></i></span>
      <span (click)="toggleEdition()" class="input-group-addon"><i class="fa fa-fw fa-times"></i></span>
    </div>
      <p class="help-block" *ngIf="form.hasError('required', ['fieldValue']) && form.get('fieldValue').dirty">{{ viewModel.validations.type }} is required</p>
      <p class="help-block" *ngIf="form.hasError('pattern', ['fieldValue']) && form.get('fieldValue').dirty">{{ viewModel.validations.message }}</p>
  </div>
</form>

¿Is there something wrong with the way Im using *ngIf in the < p >? I don’t know what more to do

Thanks in advance

I’ve used several forms of error handling. I think the error handling is fine, dont know what is failing.