Angular 角度6。如何在已创建的CustomControl中指定验证程序状态此控件？

我为表单创建了一个自定义控件。 我的控制像这样

CustomControlComponent.html

<div fxLayout='row' fxLayoutAlign="end center" class="app-password">
  <input fxFlex kendoTextBox 
    [ngClass]="{ 'ng-dirty': isDirty }"
    [(value)]="currentValue"  
    [attr.type]="type"
    [disabled]="isDisabled"
    (touched) ="onTouched($event)"
    (input)="onChange($event)"
    (blur)="onBlur()"
    (focus)="onFocus()"
  /><span   [ngClass]="{'k-icon': true, 'k-i-unlock': isShowPassword , 'k-i-lock': !isShowPassword }" 
    (mouseup)="onMouseUp()"
    (mousedown)="onMouseDown()"
    ></span>
</div>

然后我创建了FormControle

import { FormControl, FormGroup, Validators } from '@angular/forms';
.....
    const passwordControl = new FormControl(null, [Validators.requirement, Validators.max(3)]) 

用于反应形式

<app-custom-control [formControlName]="'password'" ></app-custom-control>

问题:

如何在创建的CustomControl中指定验证程序状态该控件

---

如果控件无效或脏，我需要设置此控件窗体的样式。

您可以使用css完成此操作。将无效类添加到密码输入中。 此css查询正在检查主机上是否设置了无效类。您现在可以将其与ng dirty结合使用

:host.ng-invalid .invalid {
    border: 1px solid red;
}

:host.ng-invalid .invalid {
    border: 1px solid red;
}