Textarea ignore input, but you need to click "Save"

Question

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

This causes the user’s problem and wants the existing behavior where clicking introduces the “Save” button to start automatically

Any idea how to invoke the "Save" button when you are still focusing on textArea but ignoring the dividing line?

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

Answer 1

you can bind the same Save button function to keydown.enter texterea and call $event.preventDefault to avoid a new line.

sample plunker .

Answer 2

Assuming your textarea is inside the form element.

{Plunger Demo}

You can achieve this using hidden 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!'); } } 

Answer 3

Reply extension on @Pengyy

You can bind input key binding to the pseudo-server function and prevent it inside, which prevents both the save function and the new line. Then you can either call the save function from there (provided that it is available, for example, as a service), or you can emit an EventEmitter, and so that this emit is caught to call the Save function.

Answer 4

You can create a service that can send notifications to other components that will process this command. A service might 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 must be registered in the providers section of the module. Note. If the data should be transmitted in the notification, you can declare a non-parametric parameter type for the dataSavingRequested Subject theme (for example, string ).

The service will be inserted into the component with the textarea element and called in the Enter keypress event handler:

 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 will subscribe to the dataSavingRequested$ service notification and save the data upon notification:

 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 above code assumes that the save should be performed in the component using the "Save" button. An alternative would be to move this logic to a service that could set the saveData method, which could be called by components. However, the service will need to collect data for storage. It can be obtained using the Subject / Observable mechanism or directly passed by components as a saveData parameter or by calling another service method.

Answer 5

it can be 2 solutions:

1. Use JavaScript to process the input of an event and run the save function in it.

or

2. Use the same thing from the corner, as described in this .

It can also help you.