Angular 4+ directive that access component NgModel

Question

I'm trying to change styles due to NgModel.control state. Since I wanna do it DRY, I thought that a directive reading component NgModel state will do the trick.

Is that even possible? Couldn't find any hints on how to do it.

My idea would so I can write something like this:

<div class="fields">
    <app-dummy-selector name="dummy" 
        [(ngModel)]="dummy" required appValidationError>
    </app-selector-moneda>
</div>

And then, my directive be defined with something like this

@Directive({
  selector: '[appValidationError]'
})
export class validationError {
  // do some logic to add Styles via Renderer2 or ElementRef
  // based on NgNodel control state 
  constructor(private el: ElementRef, private renderer: Renderer2) { }

}

To clarify UPDATE, what I ld like to avoid is to avoid adding #ctrl="ngModel" [ngClass]="{ error: (ctrl.invalid) && ctrl.touched }" like this:

<div class="fields">
    <app-dummy-selector name="dummy" 
        #ctrl="ngModel" [ngClass]="{ error: (ctrl.invalid) && ctrl.touched }" 
        [(ngModel)]="dummy" required appValidationError>
    </app-selector-moneda>
</div>

do u need to change the styles according to the ngModel value ? — Sachila Ranawaka
– Sachila Ranawaka, Commented Jan 11, 2018 at 16:24
I wanna change the style based on ngModel state not the value (I update the question providing more information) — genuinefafa
– genuinefafa, Commented Jan 11, 2018 at 16:33

Lazar Ljubenović · Accepted Answer · 2018-01-11 16:32:23Z

1

You can inject NgControl on the host to access the control.

constructor(@Host() private ngControl: NgControl) { }

As for handling errors on the view which your questions seems to be about after your update, I can suggest the following two packages. (Full disclosure, they're mine.)

It's built to handle cases such as yours to reduce boilerplate.

answered Jan 11, 2018 at 16:32

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

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

2 Comments

genuinefafa Over a year ago

What about reacting to touch event? NgControl allow me to check for statusChanges but no touchChanges... :(

Lazar Ljubenović Over a year ago

@genuinefafa There's no statusChanges on the control, no matter how you access the control. It simply doesn't exist yet.

Collectives™ on Stack Overflow

Angular 4+ directive that access component NgModel

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related