CODEWITHSUNDEEP
angulardata-binding
Konrad Viltersten
Konrad Viltersten

Reputation: 39058

Input text box binding failing to set but working on get of an Angular property

I noticed that the following binding seems to produce the correct behavior in regard to set property but isn't invoked when setting the value.

<input (keyup)="onKeyUp()" value={{config.rendition}}>

export class RowConfig {
  constructor(public amount = 0, ... ) { }

  get rendition() { return this.amount + "$"; }
  set rendition(input: string) {
    console.log("setter with '" + input + "' invoked");
    const numeric = input.replace("$", "");
    this.amount = +numeric;
  }
}

The keyup is performed as supposed to but the setter of rendition doesn't print anything to the console so I'm assuming it's not bound properly and/or isn't bindable at all.

I'm loosely following stuff like this and I have a Blitzy of the behavior to play with.

Googling was a bit difficult because of the collision between input as a tag and @Input as a decorator. The latter won by far... What I gathered, though, was to either bind using [(ngModel)] or to use directives or pipes. All of the trails seemed a bit uncertain in relevance and/or reliability. Hence the demo on StackBlitz.

Upvotes: 0

Views: 441

Answers (1)

Geggi632
Geggi632

Reputation: 564

Try this:

<div *ngIf="config.editing">
  <input #first type="text" placeholder="xxx xx aaaa..." [(ngModel)]="config.first">
  <input #second type="text" placeholder="xxx aaaa..." [(ngModel)]="config.second">
  <input #amount type="text" (keyup)="onKeyUp()" placeholder="xxx" [(ngModel)]="config.rendition">
  <input (click)="onSave()" type="button" value="save">
</div>

Upvotes: 1

Related Questions