以 Angular 6 模板驱动形式向父元素添加验证类答案

【问题标题】：Add validation class to parent element in angular 6 template driven form以 Angular 6 模板驱动形式向父元素添加验证类
【发布时间】：2019-05-24 15:40:57
【问题描述】：

概述：

我正在尝试找到一种将类添加到输入父元素的好方法

我目前有这个代码：

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

效果很好！

问题：

我希望能够以更通用的方式来做到这一点，即

使用指令设置父类（似乎找不到如何将 prop.invalid 传递给它？）
将父元素设置为在全局级别接收类而不是输入

注意：我没有使用响应式表单

【问题讨论】：

标签： angular validation angular2-directives

【解决方案1】：

您可以向 <p> 元素添加自定义属性指令，以检查其子 <input> 有效性。

关于你在问题中提到的问题：

using a directive to set the parent class：使用Renderer2 类将error 类添加/删除到<p> 元素
(can't seem to find how to pass prop.invalid to it?)：您将通过使用@ContentChild 获得对<input> 的引用，并通过NgModel 类找到它。
setting the parent element to receive the classes at a global level instead of the input: 不知道是什么问题，好像是第一个。如果需要，请对此答案添加评论。

Live Stackblitz DEMO

这些是您需要进行的更改：

HTML：

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

指令：

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');
  }
}

【讨论】：