CODEWITHSUNDEEP
angular
Srinivas Damam
Srinivas Damam

Reputation: 3045

Angular 2 custom directive doesn't update the model

I'm using custom directive and it should set value attribute to the host. Issue is it doesn't update the model of the component and only updates the element value.

Here is the live plnkr link: https://plnkr.co/edit/lcT4q9EP3OEnuIDcGobC?p=preview

//our root app component
import {Component} from 'angular2/core';
import { Directive, ElementRef, OnInit, HostListener } from 'angular2/core';

@Directive({selector: '[myData]'})

class MyDataDirective implements OnInit {
  private el: any;
  constructor(el: ElementRef) {
    this.el = el.nativeElement
  }

  @HostListener('focus') onFocus() {
    console.log("focus event triggered...")
    this.el.setAttribute("value", "On Focus value") //Input value changes but model doesn't update
  }

  ngOnInit() {
    console.log("oninit function called...")
    this.el.setAttribute('value', 1234)

  }
}


@Component({
  selector: 'my-app',
  template: `
    <input type="text" placeholder="Enter text" [(value)]="inputValue" myData/>
  `;
  directives: [MyDataDirective]
})

export class App {
  constructor() {
    this.inputValue = "Value from model"
  }
}

Upvotes: 4

Views: 3705

Answers (1)

yurzui
yurzui

Reputation: 214265

Updating input value attribute doesn't change value which we can see

And also from documentation:

In fact, once we start data binding, we are no longer working with HTML attributes. We aren't setting attributes. We are setting the properties of DOM elements, components, and directives.

If you change 

this.el.setAttribute("value", "On Focus value")

with

this.el.value = "On Focus value"

it should update your input but not model.

If you want to update model so you should know that banana in box binding [(value)] is the same as:

[value]="inputValue" (valueChange)="inputValue="$event"

So your directive might look like:

class MyDataDirective implements OnInit {
  private el: any;
  constructor(el: ElementRef) {
    this.el = el.nativeElement
  }
  @Output() valueChange = new EventEmitter();

  @HostListener('focus') onFocus() {
    console.log("focus event triggered...")
    this.valueChange.emit("On Focus value");
  }

   @HostListener('input') onInput() {
    console.log("input event triggered...")
    this.valueChange.emit(this.el.value);
  }

  ngOnInit() {
    console.log("oninit function called...")
    this.valueChange.emit("1234");

  }
}

Plunker Example

This article might be interested for you

Upvotes: 3

Related Questions