CODEWITHSUNDEEP
angulartypescript
Khiem Nguyen
Khiem Nguyen

Reputation: 413

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 ?

Upvotes: 0

Views: 241

Answers (1)

micronyks
micronyks

Reputation: 55443

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

Upvotes: 3

Related Questions