触摸/未触摸未在自定义输入组件中更新-Angular 2 [英] touched/untouched not updating in custom input component - Angular 2
问题描述
我有一个自定义输入组件,该组件正在更新验证和状态(未触摸/未触摸).所有其他状态状态(原始/肮脏)均按预期工作.
I have a custom input component that is updating validation and states with the exception of touched/untouched. Everything else state-wise (pristine/dirty) works as expected.
这里有个笨蛋: https://plnkr.co/edit/O9KWzwhjvySnXd7vyo71
import { Component, OnInit, Input, ElementRef, forwardRef, Renderer } from '@angular/core';
import { REACTIVE_FORM_DIRECTIVES, Validator, Validators, NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = /*@ts2dart_const*/ {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
};
const noop = () => {};
@Component({
selector: 'my-custom-input',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
template: `
<div class="form-group">
<label>CUSTOM INPUT</label>
<input type="text" class="form-control" [(ngModel)]="value" required>
<p *ngIf="control.errors.required && control.touched">Field is required</p>
<strong>Has input been touched: {{control.touched ? 'Yes' : 'No'}}</strong><br>
<strong>Is input untouched: {{control.untouched ? 'Yes' : 'No'}}</strong><br>
<strong>Is input dirty: {{control.dirty ? 'Yes' : 'No'}}</strong> <br>
<strong>Is input pristine: {{control.pristine ? 'Yes' : 'No'}}</strong>
</div>
<div>
In Custom Component: {{value}}
</div>
`
})
export class CustomInputComponent implements ControlValueAccessor {
@Input() control;
// The internal data model
private _value: any = '';
//Placeholders for the callbacks
private _onTouchedCallback: (_:any) => void = noop;
private _onChangeCallback: (_:any) => void = noop;
//get accessor
get value(): any { return this._value; };
//set accessor including call the onchange callback
set value(v: any) {
if (v !== this._value) {
this._value = v;
this._onChangeCallback(v);
}
}
//Set touched on blur
onTouched(){
this._onTouchedCallback(null);
}
//From ControlValueAccessor interface
writeValue(value: any) {
this._value = value;
}
//From ControlValueAccessor interface
registerOnChange(fn: any) {
this._onChangeCallback = fn;
}
//From ControlValueAccessor interface
registerOnTouched(fn: any) {
this._onTouchedCallback = fn;
}
}
感谢您的帮助!
推荐答案
只是踩了@sharpmachine答案,它有助于解决我的问题.我只是想改善它:
Just stepped on @sharpmachine answer and it helped to solve my problem. I just would like to improve it:
不必在模板级别将blur
事件绑定到onTouched()
(可能容易出错),就可以将ControlValueAccessor
公开为Directive
并在那里绑定事件.
Instead of having to bind the blur
event to onTouched()
at the template level (which can be error-prone) it is possible to expose the ControlValueAccessor
as a Directive
and bind the event there.
import { Directive, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputAccessor),
multi: true
};
@Directive({
selector: 'my-custom-input',
host: {'(blur)': 'onTouched($event)'},
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
})
export class CustomInputAccessor implements ControlValueAccessor {
// The internal data model
private _value: any = '';
public onChange: any = (_) => { /*Empty*/ }
public onTouched: any = () => { /*Empty*/ }
get value(): any { return this._value; };
set value(v: any) {
if (v !== this._value) {
this._value = v;
this.onChange(v);
}
}
writeValue(value: any) {
this._value = value;
}
registerOnChange(fn: any) {
this.onChange = fn;
}
registerOnTouched(fn: any) {
this.onTouched = fn;
}
}
这样,您应该能够使用该组件,而不必每次使用时都绑定blur
事件.
This way you should be able to use the component without having to bind the blur
event each time you use it.
希望有帮助!
这篇关于触摸/未触摸未在自定义输入组件中更新-Angular 2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!