从javascript中的表单中中断输入文本行答案

【问题标题】：break line of input text from a form in javascript从javascript中的表单中中断输入文本行
【发布时间】：2018-07-25 11:28:45
【问题描述】：

我设计了一个表单，它接受输入文本并将其存储为字符串，问题是，如果用户点击“Enter”，文本不会换行，而是会一起显示！我该如何解决这个问题我正在使用带有typscript的angular6框架，我想知道管道是否可以解决这个问题？

【问题讨论】：

请在stackblitz.io上提供minimal reproducible example。
不妨跳过 stackblitz.io 并使用 Stack Snippets 将 minimal reproducible example 放在 Stack Overflow 上...

标签： javascript angular typescript input angular6

【解决方案1】：

您无法管理文本框中的“输入”键。要查看您输入的字符串中的enter 键，您必须使用textarea（您可以将其设置为文本框），例如，

HTML：

<textarea type="text" #elem></textarea><br/>
<button (click)="checkValue()">Click to see the value</button>
<div *ngIf="value!=''">
    You have typed:<p style="white-space: pre-wrap;">{{value}}</p>
</div>

TS：

export class AppComponent  {
  @ViewChild("elem") inputChild: ElementRef;
  value='';
  checkValue(){
     this.value= this.inputChild.nativeElement.value;
  }
}

Stackblitz Demo

使用ngModel更新

HTML：

<textarea [(ngModel)]="value" #elem></textarea><br/>
<div *ngIf="value!=''">
  You have typed:<p style="white-space: pre-wrap;">{{value}}</p>
</div>

TS：

export class AppComponent  {
   @ViewChild("elem") inputChild: ElementRef;
   name = 'Angular 6';
   value='';
}

Updated Demo

【讨论】：

使用 Ngmodel 会比使用 inputChild 更容易
并在 html 中打印模型值: {{val}}。
@T.Shashwat 你是对的，这是另一种方法。
我正在使用 ngModel，您能否详细说明我如何输入 ngModel 并按照您上面的答案对其进行格式化？

【解决方案2】：

所以，看来有很多方法可以做到，我选择的一种是

{{user.Diagnosis}}

它似乎只涉及一些样式（空白和预包装）

感谢所有帮助的人，尤其是Rohan Kumar

【讨论】：