Angular 6. 如何在创建的自定义控件中赋予验证状态这个控件？答案

【问题标题】：Angular 6. How in the created CustomControl to given Validator state this contol?Angular 6. 如何在创建的自定义控件中赋予验证状态这个控件？
【发布时间】：2018-12-25 09:51:48
【问题描述】：

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

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>

CustomControlComponent.ts

import { Component, forwardRef, OnInit, Input } from '@angular/core';
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-control',
  templateUrl: './CustomControl.component.html',
  styleUrls: ['./CustomControl.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => PasswordComponent),
      useValue: (c: FormControl) => PasswordComponent,
      multi: true
    }
  ]
})
export class CustomControl implements ControlValueAccessor, OnInit {
  public isDisabled: boolean;
  public isDirty = false;
  public type = 'password';
  public isShowPassword = false;
  public currentValue: string = null;
  // Events change and touched
  private propagateChange = (_: any) => { };
  private propagateTouched = () => { };

  constructor() { }

  public ngOnInit() { }

  public writeValue(password: string): void {
    if (!password || typeof password !== 'string') {
      return;
    }
    this.currentValue = password;
    this.propagateTouched();
    this.propagateChange(this.currentValue);
  }

  public registerOnChange(fn: any): void {
    console.log(fn);
    this.propagateChange = fn;
  }

  public registerOnTouched(fn: any): void {
    this.propagateTouched = fn;
  }

  public setDisabledState?(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
  }

  public get value(): string {
    return this.currentValue;
  }

  public onTouched(event) {
    this.propagateTouched();
  }

  public onShow() {
    if (this.type === 'password') {
      this.type = 'text';
    } else {
      this.type = 'password';
    }
  }

  public onMouseUp() {
    this.type = 'password';
    this.isShowPassword = false;
  }

  public onMouseDown() {
    this.type = 'text';
    this.isShowPassword = true;
  }

  public onChange(event) {
    this.writeValue(event.target.value);
  }


  public onBlur() {

  }

  public onFocus() {
    this.isDirty = true;
    this.propagateTouched();
  }
}

然后我创建了 FormControle

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

用于 ReactiveForms

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

问题：

如何在创建的CustomControl中给定Validator状态这个控件？

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

【问题讨论】：

标签： angular angular2-forms angular6 angular-forms

【解决方案1】：

你可以用 css 做到这一点。您将无效类添加到密码输入中。此 css 查询正在检查是否在主机上设置了 ng-invalid 类。您现在可以将其与 ng-dirty 结合使用

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

【讨论】：