Set input invalid inside custom form control in Angular 2

Question

I have created a custom autocomplete form control, that implements ControlValueAccessor and Validator and integrated it successfully into a reactive form. The input element inside the custom form control uses ngModel.

The value of the form component is valid, if the object returned by it contains a numeric ID.

For example { id: 1, name: 'Test' } would be a valid object.

Everything is working fine, but unfortunately the input element has the ng-valid CSS class applied to it, since it is not part of the reactive validation process (it uses ngModel).

The input element has my own appInput directive applied to it, so I have access to all form related classes like NgControl, or FormGroupDirective.

This is my custom autocomplete template:

<input
    #searchTerm
    appInput
    type="search"
    [ngModel]="name"
    (ngModelChange)="keyupSubject.next($event)"
/>

and it is inside a reactive formGroup:

<div [formGroup]="parentFormGroup">
    <div class="col-sm-11">

        <app-autocomplete
            formControlName="name">
        </app-autocomplete>

    </div>
</div>

I have tried ngControl and setErrors inside my appInput directive, but the CSS class is still not set.

@Input()
set errors(errors) {
    const control = this._ngControl;
    control.control.setErrors(errors);
}

How do I set the input element inside my custom form control invalid? I am asking specifically about the CSS class ng-invalid on the input element.

If you are willing to create your own validation service/component that uses your custom CSS classes, then you should read the following : coryrylan.com/blog/… I had a similar problem bypassed it following the above method. Maybe this is an overkill for one control only but it's a great approach if you have many types of validations. — ktsangop
– ktsangop, Commented Aug 3, 2017 at 13:56
I already use a similar approach, but this is not what the question is about. I need to set ng-invalid on an input element. — Alexander Ciesielski
– Alexander Ciesielski, Commented Aug 3, 2017 at 13:58
OK sorry, my bad. Please try to pass the formControlName AND the id properties to your custom component like this : [formControlName]="name" [id]="controlid". Edit : id probably not needed... trying to remember how i did it a few months back, sorry...! — ktsangop
– ktsangop, Commented Aug 3, 2017 at 14:07

Cirem · Accepted Answer · 2018-09-21 16:03:48Z

1

In your control get the NgControl

ngOnInit(): void {
    this.ngControl = this.inj.get(NgControl);
}

Then in your view you can bind any elements to the validity on ngControl:

<input [ngClass]="ngControl?.valid ? 'ng-valid' : 'ng-invalid'" class="form-control" />

answered Sep 21, 2018 at 16:03

Cirem

8701 gold badge11 silver badges15 bronze badges

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

Comments

Elhoussin GHANEM · Accepted Answer · 2020-08-17 20:14:06Z

0

Try this approch, add #searchTerm="ngModel" to the input and test on its validation with : searchTerm.invalid

<input
    #searchTerm="ngModel"
    appInput
    type="search"
    [ngModel]="name"
    (ngModelChange)="keyupSubject.next($event)"
/>
<div *ngIf="searchTerm.invalid" class="invalid-field">
   Field Invalid
</div>

answered Aug 17, 2020 at 20:14

Elhoussin GHANEM

3292 silver badges9 bronze badges

Collectives™ on Stack Overflow

Set input invalid inside custom form control in Angular 2

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