example - tocado/intacto no se actualiza en el componente de entrada personalizado-Angular 2

angular reactive forms validation

Question

Tengo un componente de entrada personalizado que está actualizando la validación y los estados con la excepción de tocar / intacto. Todo lo demás en estado (prístino / sucio) funciona como se espera.

Aquí hay un 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;
  }

}

¡Gracias por cualquier ayuda!

Answer 1

Estaba cometiendo dos errores, como un pomo. Así que la plantilla debe ser:

<div class="form-group">
    <label>CUSTOM INPUT</label>
    <input type="text" class="form-control" [(ngModel)]="value" (blur)="onTouched($event)" 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>

Entonces, las dos cosas donde (blur)="onTouched($event)" en la entrada, y el <p *ngIf="control?.errors?.required && control?.touched">

Answer 2

Simplemente pisé la respuesta de @sharpmachine y me ayudó a resolver mi problema. Solo me gustaría mejorarlo:

En lugar de tener que vincular el evento de blur a onTouched() en el nivel de plantilla (que puede ser propenso a errores), es posible exponer el ControlValueAccessor como una Directive y vincular el evento allí.

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;
  }
}

De esta manera, debería poder usar el componente sin tener que vincular el evento de blur cada vez que lo use.

¡Espero eso ayude!