将角色6模板驱动形式的验证类添加到父元素

Question

Overview:

I am trying to find a nice way to add a class to an inputs parent element

I currently have this code:

<p [ngClass]="{'error' : prop.invalid && (prop.dirty || prop.touched) }"> <label>Prop Label</label> <input type="text" [(ngModel)]="model.prop" #prop="ngModel" required /> </p>

which works fine!

Problem:

I want to be able to do it in a more generic way ie

• using a directive to set the parent class (can't seem to find how to pass prop.invalid to it?)
• setting the parent element to receive the classes at a global level instead of the input

Note: I am not using reactive forms

Answer 1

You can add a custom attribute directive to the <p> element that will check it's child <input> validity.

Regarding the problems you've mentioned in your question:

• using a directive to set the parent class : use Renderer2 class to add/remove error class to <p> element

• (can't seem to find how to pass prop.invalid to it?) : you'll get a reference to the <input> by using @ContentChild , finding it by NgModel class.

• setting the parent element to receive the classes at a global level instead of the input : not sure what is the problem, looks like the first one. add a comment to this answer if needed.

---

Live Stackblitz DEMO

These are the changes you need to make:

HTML:

<p requiredValidator>
    <label>Prop Label</label>
  <br>
  <input type="text" [(ngModel)]="model.prop" #prop="ngModel" required />
</p>

Directive:

import { Directive, ElementRef, Renderer2, ViewChild, ContentChild, AfterContentInit } from '@angular/core';
import { NgModel } from '@angular/forms';

@Directive({
  selector: '[requiredValidator]'
})
export class RequiredValidatorDirective implements AfterContentInit {
  element: ElementRef;
  renderer: Renderer2;
  @ContentChild(NgModel) input: NgModel;

  constructor(element: ElementRef, renderer: Renderer2) {
    this.element = element;
    this.renderer = renderer;
  }

  ngAfterContentInit() {
    this.input.valueChanges.subscribe(() => {
      if (this.input.invalid  && (this.input.dirty || this.input.touched)) {
        this.addErrorClass();
      } else {
        this.removeErrorClass();
      }
    })
  }

  addErrorClass(): void {
    this.renderer.addClass(this.element.nativeElement, 'error');
  }

  removeErrorClass(): void {
    this.renderer.removeClass(this.element.nativeElement, 'error');
  }
}