Form Control Validation does not show error messages

Topic: Form Control Validation does not show error messages

Jordan free 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 free 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

<p>Dear <a href="/profile/?id=44124" target="_blank" rel="nofollow">@Jordan</a></p>

<p>Here is my solution to your problem:</p>

<pre class="prettyprint"><code><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>
</code></pre>

<pre class="prettyprint"><code> validatingForm: FormGroup;

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

get primaryAdGroupOwnerPic() {
    return this.validatingForm.get('primaryAdGroupOwnerPic');
  }
</code></pre>

<p>For more information I refer you to the <a href="https://angular.io/guide/form-validation#built-in-validators" target="_blank" rel="nofollow">https://angular.io/guide/form-validation#built-in-validators</a></p>

<p>Hope it helps!</p>

<p>Best, Bartosz.</p>

Please insert min. 20 characters.

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 free 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