CODEWITHSUNDEEP
javascripthtmlangulartextarea
ove
ove

Reputation: 3202

Textarea to ignore enter but need to trigger Save button

A bit tricky situation. For the code below, I have added (keydown.enter)="false" to ignore the break line/enter button in textarea

This is causing a user issue and would like the existing behaviour where Pressing enter should automatically trigger the "Save button"

Any idea how to trigger the Save button when still focusing in textArea but ignore the breakline?

    <textarea #textArea
    style="overflow:hidden; height:auto; resize:none;"
    rows="1"
    class="form-control"
    [attr.placeholder]="placeholder"
    [attr.maxlength]="maxlength"
    [attr.autofocus]="autofocus"
    [name]="name"
    [attr.readonly]="readonly ? true : null"
    [attr.required]="required ? true : null"
    (input)="onUpdated($event)"
    [tabindex]="skipTab ? -1 : ''"
    (keydown.enter)="false"
    [(ngModel)]="value">
    </textarea >

Upvotes: 7

Views: 2442

Answers (5)

Asav Vora
Asav Vora

Reputation: 61

it could be 2 solutions:

  1. Use javascript to handle enter event and trigger Save function in it

or

  1. Use Same thing from Angular side as describe in this.

This may also help you

Upvotes: 0

Joo Beck
Joo Beck

Reputation: 1913

Extending the answer by @Pengyy

You can bind the bind the enter key to a pseudoSave function, and preventDefault inside of that, thus preventing both the Save function and the newline. Then you can either call the save function from there(assuming it is accessible such as a service) or you can emit an EventEmitter, and have that emit get caught to trigger the Save function.

Upvotes: 2

Martin Parenteau
Martin Parenteau

Reputation: 73731

You can create a service which can send a notification to other components that will handle the command. The service could look like this:

import { Injectable } from "@angular/core";
import { Subject } from "rxjs/Subject";

@Injectable()
export class DataSavingService {

    private dataSavingRequested = new Subject<void>();
    public dataSavingRequested$ = this.dataSavingRequested.asObservable();

    public requestDataSaving(): void {
        this.dataSavingRequested.next();
    }
}

... and should be registered in the providers section of the module. Note: if data must be passed in the notification, you can declare a non-void parameter type for the dataSavingRequested Subject (e.g. string).

The service would be injected in the component with the textarea element and called in the handler of the Enter keypress event:

import { DataSavingService } from "./services/data-saving.service";
...

@Component({
    template: `
        <textarea (keypress.enter)="handleEnterKeyPress($event)" ...></textarea>
    `
})
export class ComponentWithTextarea {
    constructor(private dataSavingService: DataSavingService, ...) {
        ...
    }

    public handleEnterKeyPress(event: KeyboardEvent): void {
        event.preventDefault(); // Prevent the insertion of a new line
        this.dataSavingService.requestDataSaving();
    }
    ...
}

The component with the Save button would subscribe to the dataSavingRequested$ notification of the service and save the data when notified:

import { Component, OnDestroy, ... } from "@angular/core";
import { Subscription } from "rxjs/Subscription";
import { DataSavingService } from "../services/data-saving.service";
...

@Component({
    ...
})
export class ComponentWithSaveButton implements OnDestroy {

    private subscription: Subscription;

    constructor(private dataSavingService: DataSavingService, ...) {
        this.subscription = this.dataSavingService.dataSavingRequested$.subscribe(() => {
            this.saveData();
        });
    }

    public ngOnDestroy(): void {
        this.subscription.unsubscribe();
    }

    private saveData(): void {
        // Perform data saving here
        // Note: this method should also be called by the Save button
        ...
    }
}

The code above assumes that the saving must be performed in the component with the Save button. An alternative would be to move that logic into the service, which would expose a saveData method that could be called by the components. The service would need to gather the data to save, however. It could be obtained with a Subject/Observable mechanism, or supplied directly by the components as a parameter to saveData or by calling another method of the service.

Upvotes: 0

Ankit Singh
Ankit Singh

Reputation: 24945

Assuming that your textarea is inside a form element.

{Plunker Demo}

You can achieve it by using a hidden submit input, like this

@Component({
  selector: 'my-app',
  template: `
    <form (submit)="formSubmitted($event)">
      <input #proxySubmitBtn type="submit" [hidden]="true"/>

      <textarea #textArea (keydown.enter)="$event.preventDefault(); proxySubmitBtn.click()">
    </textarea>
    </form>
  `,
})
export class App {
  formSubmitted(e) {
    e.preventDefault();
    alert('Form is submitted!');
  }
}

Upvotes: 1

Pengyy
Pengyy

Reputation: 38171

you can bind the same function of Save button to keydown.enter of texterea, and call $event.preventDefault to avoid the newline.

sample plunker.

Upvotes: 1

Related Questions