Angular 6.如何在创建自定义控件时给定Validator state这个控件?
Angular 6. How in the created CustomControl to given Validator state this contol?
我为表单创建了一个自定义控件。
我的控件是这样的
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 的样式。
您可以使用 css 执行此操作。您将无效的 class 添加到您的密码输入中。
此 css 查询正在检查主机上是否设置了 ng-invalid class。您现在可以将其与 ng-dirty
结合使用
:host.ng-invalid .invalid {
border: 1px solid red;
}
我为表单创建了一个自定义控件。 我的控件是这样的
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 的样式。
您可以使用 css 执行此操作。您将无效的 class 添加到您的密码输入中。 此 css 查询正在检查主机上是否设置了 ng-invalid class。您现在可以将其与 ng-dirty
结合使用:host.ng-invalid .invalid {
border: 1px solid red;
}