Tôi có thành phần đầu vào tùy chỉnh đang cập nhật xác thực và nêu rõ ngoại lệ bị chạm/không chạm. Mọi thứ khác nhà nước-khôn ngoan (nguyên sơ/bẩn) hoạt động như mong đợi.chạm/không chạm vào không cập nhật trong thành phần đầu vào tùy chỉnh - Góc 2
Dưới đây là một plunker: 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;
}
}
Nhờ sự giúp đỡ!
Cảm ơn! Rất hữu ích! – sharpmachine