Angular 2 attribute directive to modify the input host text and value

Question

I need to have an attribute directive that will format the input as dd-mm-yyyy and have it as text value and according javascript date as value. At rc.3 I used ngFormControl.valueAccessor.writeValue() and a few other methods. Now in it seems that NgFormControl is gone in the release version. What should i be using now? Here is what I was doing before:

<input type="text" format-date2 [ngFormControl]='formControls.dateOfMarriage'>

import {Directive, ElementRef} from '@angular/core';
import {NgFormControl} from '@angular/common';

@Directive({
selector: '[format-date2]',
host: {
  '(input)': 'onInputChange()',
  'placeholder': 'dd-mm-yyyy',
 },
})
export class FormatDate2 {

viewValue;
modelValue;
currentValue = '';
el: HTMLInputElement;

constructor(private model: NgFormControl, private elementRef: ElementRef) {
  this.el = elementRef.nativeElement;
}

ngOnInit() {
 if (this.model.control.value) {
  let d = new Date(this.model.control.value);
  let s = this.pad(d.getDate()) + '-' + this.pad(d.getMonth() + 1) + '-' + d.getFullYear();
  this.model.valueAccessor.writeValue(s);
  }
}

pad(n) {
  return n < 10 ? '0' + n : n;
}

onInputChange() {
  let i = this.el.selectionEnd - this.el.value.length;
  this.format(this.el.value);
  i = this.viewValue.length + i;
  this.model.control.updateValue(this.modelValue);
  this.model.valueAccessor.writeValue(this.viewValue);
  this.el.setSelectionRange(i, i);
  return false;
}

format(val) {
// some code
//   this.modelValue = 'some value';
//   this.viewValue = 'another value' 
}

}

Paul Samsotha · Accepted Answer · 2016-10-13 23:42:11Z

2

Instead of NgFormControl class use NgControl / @angular/forms
Instead of [ngFormControl] directive, use [formControl].

You also need to make sure that you @NgModule.imports: [ ReactiveFormsModule ] into whatever module the component using the forms is declared in. This is for using reactive forms, i.e FormControl/FormGroup, but template forms, just use FormsModule. Your example though looks like it's using reactive forms. But your directive will work with template forms also.

answered Oct 13, 2016 at 23:42

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mishap Over a year ago

Specifically I used NgControl.control.setValue() and NgControl.valueAccessor.writeValue()

Collectives™ on Stack Overflow

Angular 2 attribute directive to modify the input host text and value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related