Custom Value Accessors with ion-input (Ionic 2)

[endoooo]

hey guys!

I'm having problem using a custom value accessor with ion-input.
what I'm trying to do is to format an input text field while the user is typing, to enhance the user experience, like this: 12345678900a => 123.456.789-00 (it removes all the non-digit characters and apply the dots and dash).

to achieve this, I've created a custom value accessor as discussed in angular/angular#6174.

the problem is that when I use the custom directive with a "pure" input, the value saved to ngFormControl is correct, but when I use the same directive in a ion-input, the value passed to the ngFormControl is not the one that the user is actually seeing, but the value before the formatting (for instance, if the user types 123a, what he sees in the input is 123, but the value in the model is 123a).

thank you and congrats for the outstanding work with Ionic 2!

---

the code (excerpts) from the custom value accessor, form component and form template:

custom value accessor

@Directive ({
  selector: '[agl-id-num]',
  host: {
    '(input)': 'doOnChange($event.target)',
    '(blur)': 'doOnBlur($event.target)'
  },
  bindings: [ CUSTOM_VALUE_ACCESSOR ]
})
export class IdNumAccessor extends DefaultValueAccessor {

  constructor(_renderer: Renderer, _elementRef: ElementRef) {
    super(_renderer, _elementRef);
  }

  writeValue(value:any):void {
    if (value!=null) {
      super.writeValue(value);
    }
  }

  doOnChange(elt) {
    // prevent user to input non-digit characters while typing
    // and limit user input to 11 characters
    let val = elt.value
      .replace(/\D/g, '')
      .substring(0,11);

    elt.value = val; // this is what changes the input value as user types

    this.onChange(val); // this is what saves the value to the model
  }

  doOnBlur(elt) {
    // format field on blur only
    let val = elt.value;
    if (val.length === 11) {
      elt.value = val.replace(/^(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
    }
  }
}

form component

@Component({
  selector: 'agl-client-register-form',
  templateUrl: 'build/components/clients/client-register-form/client-register-form.component.html',
  directives: [ FORM_DIRECTIVES, IdNumAccessor ]
})
export class ClientRegisterFormComponent implements OnInit {
  form: ControlGroup;  

  @Output() onFormSubmit = new EventEmitter();
  @Input() initialValues;

  constructor(
    private fb: FormBuilder) {}

  ngOnInit() {
    console.log(this.initialValues);

    this.form = this.fb.group({  
      'name':               [this.initialValues.name, Validators.required],
      'idNum':              [this.initialValues.idNum, Validators.required],
      'idNumTest':          [this.initialValues.idNum, Validators.required],
      'email':              [this.initialValues.email],
      'celphone':           [this.initialValues.celphone],
      'sendBoletoToMyself': [this.initialValues.sendBoletoToMyself]
    });
  }

  onSubmit():void {
    console.log(this.form.value);
  }
}

form template

<form novalidate
    [ngFormModel]="form"
    (ngSubmit)="onSubmit()">
    <ion-list>
        <!-- using with "pure" input -->
        <input
            agl-id-num
            type="tel"
            [ngFormControl]="form.controls['idNumTest']"
            required />
        <ion-item>
            <ion-label floating>Id Num*</ion-label>
            <!-- using with ion-input (described problem) -->
            <ion-input
                agl-id-num
                type="tel"
                [ngFormControl]="form.controls['idNum']"
                required>
            </ion-input>
        </ion-item>
    </ion-list>
    <div padding>
        <button block type="submit">Register</button>
    </div>
</form>

using Ionic 2.0.0-beta.6

[jgw96]

Hello! Thanks for opening an issue with us! Would you mind making a plunker that demonstrates this issue please?

[endoooo]

sure! there it is: http://embed.plnkr.co/b2rvq3uHcrxpmzTZ23f1/

I've applied the custom num accessor to both inputs (the ion one and the "pure" one).
note that in the ion-input, when I type a non digit character it is reflected in the form.value, but in the non-ion input it doesn't happen.

[robertdp]

This might be related to angular/angular#5328. Since upgrading to Ionic 2.0.0-beta.7 I'm struggling with the issue that Ionic and Angular form handling seems to be constantly out of sync by one event.

Edit: My issue only occurs when using ChangeDetectionStrategy.OnPush though.

[endoooo]

@robertdp hum... it could be somehow related. thanks for referencing the issue!

in my case, what seems to be happening is that the DefaultValueAccessor is conflicting with my IdNumAccessor in the ion-input: the onChange event exists in both accessors, but only when used in an ion-input (with html input this doesn't happen, as shown in the plunker) it looks like the onChange in the IdNumAccessor is not being triggered and therefore the related model is binded to the value before the element.value change that happens in IdNumAccessor.

[robertdp]

Yeah, the similarities were superficial. The deeper I went into the issue with change detection the less it seemed to apply to this issue.

[endoooo]

any news on this issue?

(ps: upgrading to the current beta 8 does not help on this...)

[assisrafael]

This is still a problem in 2.0.0-beta.10

[jbgomez21]

Hi @endoooo,
any news on this issue? I have the same problem with ionic 2 RC-0

Regards

[endoooo]

hi @jbgomez21!

i think it's still an issue... unfortunately.

in the end we used HTML inputs and styled them like ion-inputs. it's not the perfect solution and it was not what we really wanted (all the MD animations were gone), but it worked.

[jbgomez21]

Hi @endoooo
It is not an ionic 2 problem
I have created a plunker example about this problem.
http://embed.plnkr.co/lWpjyCwL0l2r06u1BI0a/ (Running on Chrome)

with 16 digits work fine, but with 17 digits the input label show 1 extra character!

I think that I have a conceptual problem about what happened. Can someone explain it to me please?

[NelsonBrandao]

@endoooo @jbgomez21 You can pass the FormControl inside the directive and call setValue manually. This way the FromGroup will be updated

[endoooo]

@jbgomez21 I've made some changes in your plunker, and now it's working as it should: https://embed.plnkr.co/0vfCj6AyjfQgLGxDtDpj/

there were some problems with your implementation:

• the value accessor (which is a @Directive) was mixed with the input @Component. roughly speaking, the value accessor cares about which value should be presented in the component and how it should be saved in its model, and the input component cares about the user interface.
• your model was a primitive (string). the problem with this approach is that primitives values are passed by value and not by reference in javascript, which can cause some problems when you need to traverse the data across multiple components (3+) in the component tree.
• the way your were passing @Input values to the child components were a bit messy (no []s).

there were some other changes I've made. check the code and see if you can understand them.

@NelsonBrandao thanks for the tip. I didn't test it (so it may work), but I don't think passing FormControl inside the value accessor is a clean solution. the point of using the value accessor's onChange is exactly to reflect the value to the control model without referencing the FormControl directly, isn't it?

[jbgomez21]

@endoooo Thank you very much for your corrections.
They have been very helpful for me and surely be for other people.

Regards!