CODEWITHSUNDEEP
javascriptangulartypescript
jvrnt
jvrnt

Reputation: 655

Setter is not triggered when object changed through ngModel

I have the following code:

set dynamicData(val) {
        this.editableData.emit(val);
}

get dynamicData() {
    return this.formsData;
}

If i set dynamicData value from my component, the setter is triggered. But if i set dynamicData from input with [(ngModel)] the actual value of dynamicData is changed, but the setter is not triggered for some reason.

Here's the input:

<input type="text" name="dynamicDataSender"
                   *ngIf="someCondition"
                   [(ngModel)]="dynamicData.sender"/>

Am i missing something?

Upvotes: 1

Views: 1153

Answers (2)

Vikas
Vikas

Reputation: 12036

The [(ngModel)] syntax can only set a data-bound property. If you need to do something more or something different, you can write the expanded form.

 <input type="text" name="dynamicDataSender" #ref
   *ngIf="someCondition"  [ngModel]="dynamicData.sender" (ngModelChange)="dynamicData(ref.value)"/>

The ngModel data property sets the element's value property and the ngModelChange event property listens for changes to the element's value
ngModelChange will be fired on every keystroke you need to debounce value else event will be emitted for every keystroke and To debounce values you can use a Subject. A subject is both an observable and an observer. This means you can treat it as an observable and pass values to it as well.

debouncer= new Subject();
  constructor() {


   this. debouncer
    .debounceTime(1000)
    .subscribe((val) =>{ 
      console.log(val);
      this.editableData.emit(val);

    });
  }

set dynamicData(val) {
         this.debouncer.next(value);
}

Upvotes: 1

ForestG
ForestG

Reputation: 18123

You reference [(ngModel)]="dynamicData.sender" instead of dynamicData. You should reference the object.

If dynamicData needs to be an event emitter, then you should not use it as a property bind, but instead, use an (onChange)="modelChanged($event)" handler, where you can emit the new values to the dynamicData. ( modelChanged(value){this.dynamicData.emit(value);} ) and use some other property as ngModel.

Upvotes: 1

Related Questions