Form Control Validation does not show error messages

Topic: Form Control Validation does not show error messages

Jordan asked 5 years ago

Expected behavior I would expect error messages to display. Actual behavior Error Messages do not display but the form control does change color. Resources (screenshots, code snippets etc.)

        <div class="md-form md-bg mb-5">
          <input (keyup)="populatePrimaryAdGroupOwnerName($event)"
                 (onblur)="populatePrimaryAdGroupOwnerName($event)"
                 class="form-control"
                 formControlName="primaryAdGroupOwnerPic"
                 id="primaryAdGroupOwnerPic"
                 mdbInput
                 mdbValidate
                 type="text">
          <label for="primaryAdGroupOwnerPic">
            PIC of the Primary Owner of AD Group
          </label>
          <mdb-error *ngIf="primaryAdGroupOwnerName.invalid && (primaryAdGroupOwnerPic.dirty || primaryAdGroupOwnerPic.touched)"
                     class="mt-3">
            <span *ngIf="primaryAdGroupOwnerPic.hasError('required')">
              PIC of the Primary Owner of AD Group is required
            </span>
            <span *ngIf="primaryAdGroupOwnerPic.errors.minlength">
              The name must be at least 3 characters
            </span>
            <span *ngIf="primaryAdGroupOwnerPic.hasError('userunknown')">
              The user cannot be found
            </span>
          </mdb-error>
        </div>

Jordan commented 5 years ago

As you can see, I tried multiple variations of checking for specific errors; neither works.

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

Dear @Jordan

Here is my solution to your problem:

<form [formGroup]="validatingForm">
      <div class="md-form">
        <input
          mdbInput
          mdbValidate
          class="form-control"
          type="text"
          formControlName="primaryAdGroupOwnerPic"
          id="primaryAdGroupOwnerPic"
          required
        />
        <label for="form1">Required validator</label>
        <div
          *ngIf="
            primaryAdGroupOwnerPic.invalid &&
            (primaryAdGroupOwnerPic.dirty || primaryAdGroupOwnerPic.touched)
          "
        >
          <mdb-error *ngIf="primaryAdGroupOwnerPic.errors.required">
            PIC of the Primary Owner of AD Group is required</mdb-error
          >

          <mdb-error *ngIf="primaryAdGroupOwnerPic.errors.minlength">
            The name must be at least 3 characters</mdb-error
          >
        </div>
        <mdb-success
          *ngIf="
            primaryAdGroupOwnerPic.valid &&
            (primaryAdGroupOwnerPic.dirty || primaryAdGroupOwnerPic.touched)
          "
          >primaryAdGroupOwnerPic valid</mdb-success
        >
      </div>
    </form>

TS:

 validatingForm: FormGroup;

  ngOnInit() {
    this.validatingForm = new FormGroup({
      primaryAdGroupOwnerPic: new FormControl(null, [Validators.required, Validators.minLength(3)]),
    });
  }

  get primaryAdGroupOwnerPic() {
    return this.validatingForm.get('primaryAdGroupOwnerPic');
  }

For more information I refer you to the https://angular.io/guide/form-validation#built-in-validators

Hope it helps!

Best, Bartosz.

Jordan commented 5 years ago

From what I can tell... I have things set up just as you have in the tutorial. Also... the validation USED to work.

Bartosz Termena staff commented 5 years ago

Dear @Jordan

My example works as it should, you can copy the code and test it yourself. Maybe you have somewhere a small error in the TS code?

Best Regards, Bartosz.

Add comment