Is there a way to deactivate keyup loopback in Angular 2?

Question

Is there a way to deactivate keyup loopback in Angular 2?

Here is my form:

<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>

Is there a way to stop {{labe.Name}} from automatically updating while typing in the md-input field?

angular typescript

Answer 1

Answer №1

To achieve this, implement one-way binding in the following way:

[ngModel]="label.Name"

Note for Updating:

If your intention is to update the value of label.Name after typing is completed, you can utilize the blur event along with one-way binding as demonstrated below.

<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;
        }

}

See it in Action: https://plnkr.co/edit/D317OeHapT9m4DxgGvO1?p=preview

Answer 2

To achieve this, implement one-way binding in the following way:

[ngModel]="label.Name"

Note for Updating:

If your intention is to update the value of label.Name after typing is completed, you can utilize the blur event along with one-way binding as demonstrated below.

<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;
        }

}

See it in Action: https://plnkr.co/edit/D317OeHapT9m4DxgGvO1?p=preview

Is there a way to deactivate keyup loopback in Angular 2?

Answer №1

Similar questions

Revitalizing Ionic 2 Chart.js Graphic

The reason behind the clickable issue with my duplicate <ion-select>

Record modified fields using Angular Reactive Forms and store them in a list

What method can be used to modify the src attribute of an <img> tag given that the id of the <img> element is known?

How can you convert all nodes of a nested JSON tree into class instances in Angular 2 using Typescript?

Using Typescript, pass a Sequelize model as a property in NodeJS

Trigger on the cancellation or completion of a nested observable

What is the solution to fixing a 400 bad request error in Angular Routing?

Encountering "Object is possibly undefined" during NextJS Typescript build process - troubleshooting nextjs build

Is it possible to create an instance in TypeScript without using class decorators?

Activate the onclick event for HTML select-options when there is only a single option available

Exploring the depths of object properties with Angular, JavaScript, and TypeScript: A recursive journey

Implementing Facebook Javascript SDK to enable login and trigger re-authentication using React Web and Typescript within a component

Create a fresh type by dynamically adjusting/filtering its attributes

Title remains consistent | Angular 4

Error thrown when attempting to pass additional argument through Thunk Middleware in Redux Toolkit using TypeScript

When using a function as a prop in a React component with Typescript generics, the type of the argument becomes unknown

Exploring the filter method in arrays to selectively print specific values of an object

What is the best way to inform TypeScript that the output of the subscribe method should be recognized as an array containing elements of type

Modifying audio output in a React element