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 >

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 >

• javascript
• html
• angular
• textarea

• Any help? This looks trickier than I thought – ove Commented May 3, 2017 at 6:24
• there is a difference between AngularJS and Angular. It would help your question, if you specify the one you are using correctly. (It looks like Angular, also know as Angular 2 to me.) – hirse Commented May 4, 2017 at 8:45
• @hirse updated. Yes it is angular 2 – ove Commented May 4, 2017 at 13:13
• Can you make an edit and give more details about your file structure ? I've seen many ments from you in the answers but still unclear. Please give your ponents structure :) – maxime1992 Commented May 12, 2017 at 7:53

5 Answers 5

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.

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

sample plunker.

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!');
  }
}

You can create a service which can send a notification to other ponents that will handle the mand. 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 ponent 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 ponent 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 ponent 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 ponents. 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 ponents as a parameter to saveData or by calling another method of the service.

it could be 2 solutions:

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

or

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

This may also help you