Khiem Nguyen Khiem Nguyen - 2 months ago 20
TypeScript Question

How can I disable keyup loopback in angular 2?

I have a form like below:

<div *ngIf="formLabel" style="padding: 0 16px">
<md-input [(ngModel)]="label.Name" placeholder="Label name" style="width: 100%">
</md-input>
</div>
<md-list-item *ngFor="let label of labels">
<h3 md-line>
<md-icon class="fa fa-tag" fontSet="fa" fontIcon="fa-tag" (click)="openFormLabel(label)"></md-icon>
<a routerLink="/label/{{label.Id}}">{{label.Name}}</a>
</h3>
</md-list-item>


How can I disable {{labe.Name}} auto bind text when I'm typing in md-ipnut ?

Answer

For that, use one way binding like,

[ngModel]="label.Name"

Update :

If you intended to update label.Name value after completion of typing, you can use blur event as shown here along with one-way binding

<form #f='ngForm' (ngSubmit)="onSubmit(f.form)">

          <input (blur)="changeValue(f.form)"   //<<<===here
                 type="text" #Name="ngModel"      
                 [ngModel]="label.Name" 
                 name="Name" >
</form>


export class AppComponent {

       label={};

        onSubmit(f){
          console.log(f.controls.Name.value)
        }
        changeValue(f){
            this.label.Name=f.controls.Name.value;
        }

}

Demo : https://plnkr.co/edit/D317OeHapT9m4DxgGvO1?p=preview

Comments