Angular 4 control group validation error

Question

I am building a generic form using Angular reactive forms. I have the following generic Html for a input elements

<div class="form-input form-group" [formGroup]="group">
    <div class="row">
        <div class="col-2 font-label">
            <label>{{ config.label }}</label>
        </div>
        <div class="col-10">
            <input type="text" [attr.placeholder]="config.placeholder" disabled="disabled" class="form-control"
                [formControlName]="config.name">
            <div [hidden]="!(group.controls[config.name].invalid && group.controls[config.name].touched)">
                <small class="form-text text-danger" [hidden]="!group.controls[config.name]?.errors?.required"></small>
                <small class="form-text text-danger" [hidden]="!group.controls[config.name]?.errors?.minlength"></small>
                <small class="form-text text-danger" [hidden]="!group.controls[config.name]?.errors?.maxlength"></small>
            </div>
        </div>
    </div>
</div>

But for the following !group.controls[config.name]?.errors?.required its telling me Identifier 'required' is not defined . Same for minlength and maxlength. From where i can get minlength and maxlength and required errors?

Can you provide a plunker?

Robin Dijkhof
– Robin Dijkhof

2017-06-23 09:36:45 +00:00
Commented Jun 23, 2017 at 9:36 — Robin Dijkhof
– Robin Dijkhof, Commented Jun 23, 2017 at 9:36

Arun Kumaresh · Accepted Answer · 2017-06-23 09:59:40Z

1

try this

<small class="form-text text-danger" [hidden]="!group.controls[config.name].hasError('required')"></small>
<small class="form-text text-danger" [hidden]="!group.controls[config.name].hasError('minlength')"></small>
<small class="form-text text-danger" [hidden]="!group.controls[config.name].hasError('maxlength')"></small>

answered Jun 23, 2017 at 9:59

Arun Kumaresh

6,2966 gold badges36 silver badges50 bronze badges

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

Comments

developer033 · Accepted Answer · 2017-06-23 12:51:10Z

0

You can take advantage of the second parameter of AbstractControl#hasError method using it like this:

<small class="form-text text-danger" 
       [hidden]="!group.hasError('required', config.name)">
</small>

Also, I'd recommend you to use *ngIf instead of hidden.

You can read this for a deep explanation.

answered Jun 23, 2017 at 12:51

developer033

25k8 gold badges85 silver badges113 bronze badges

Collectives™ on Stack Overflow

Angular 4 control group validation error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related