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

Posted 2023-03-13

【中文标题】Angular 6. 如何在创建的自定义控件中赋予验证状态这个控件？

【英文标题】：Angular 6. How in the created CustomControl to given Validator state this contol?

【发布时间】：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 的样式。

【参考方案1】：

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

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