用于 textarea 的 ngModel 不能在角度 2 中工作

Posted 2023-02-21

【中文标题】用于 textarea 的 ngModel 不能在角度 2 中工作

【英文标题】：ngModel for textarea not working in angular 2

【发布时间】：2016-09-17 17:26:30

【问题描述】：

我正在尝试使用 ngModel 在 textarea 中打印 json 对象。

我做了以下事情：

<textarea style="background-color:black;color:white;" [(ngModel)]='rapidPage' rows="30" cols="120">                             
</textarea>

我想在 textarea 中加载 json 对象。上面的代码在 textarea 中加载了 rapidPage 对象，但它的 textarea 值显示为 [object Object]。

对象：

 this.rapidPage =             
        "pageRows": [
            
                "sections": [
                    
                        "sectionRows": [
                            
                                "secRowColumns": [                                       
                                ]
                            ,
                            
                                "secRowColumns": [
                                    
                                        "colName": "users"
                                    
                                ]
                            ,
                            
                                "secRowColumns": [
                                    
                                        "colName": "sample"
                                    
                                ]
                            
                        ],
                        "width": 0
                    
                ]
            
        ],
        "pageName": "DefaultPage",
        "pageLayout": "DEFAULT_LAYOUT",
        "editMode": true
    ;

我想将数据加载为字符串。 有输入吗？

【问题讨论】：

rapidPage.key 定位对象中的键。你可以发布这个对象吗？

@Jai 更新了对象的问题

【参考方案1】：

根据文档 [()] 是用于删除样板的两种语法糖。此时正在调用什么事件？无论如何，您也可以在下面的代码中将字符串与事件一起输出

可能为您的字符串输出尝试以下代码实现

@Directive(
  selector: '[ngModel]',
  host: 
    "[value]": 'ngModel',
    "(input)": "ngModelChange.next($event.target.value)"
  
)
class NgModelDirective 
  @Input() ngModel:any; // stored value
  @Output() ngModelChange:EventEmitter; = new EventEmitter() // an event emitter

【参考方案2】：

你可以stringify你的json并像这样在ngModel中使用 -

<textarea style="height:100px; width:300px;background-color:black;color:white;" [(ngModel)]='rapidPage' rows="30" cols="120">
    </textarea>

ArrayDemo: Array<any> = ["name":"pardeep","last":"jain"]
  rapidPage = JSON.stringify(this.ArrayDemo);

工作示例Working Example

浏览器显示[object object]，因为 Angular 无法解析 JSON 分配 ngModel 中的值，您必须需要一个字符串 所以使用JSON.stringify进行转换

【参考方案3】：

假设您想按原样绑定rapidPage，并且只会在 textArea 中写入有效的 JSON。

更改值时需要PARSE，在textarea中显示时需要STRINGIFY。

---

StackBlitz DEMO

在您的组件代码中执行以下操作

  rapidPage = "pageRows":["sections":["sectionRows":["secRowColumns":[],"secRowColumns":["colName":"users"],"secRowColumns":["colName":"sample"]],"width":0]],"pageName":"DefaultPage","pageLayout":"DEFAULT_LAYOUT","editMode":true; 
  // your object

  get rapidPageValue () 
    return JSON.stringify(this.rapidPage, null, 2);
  

  set rapidPageValue (v) 
    try
    this.rapidPage = JSON.parse(v);
    catch(e) 
      console.log('error occored while you were typing the JSON');
    ;
  

模板用法：

<textarea [(ngModel)]='rapidPageValue' rows="30" cols="120">                             
</textarea>

【讨论】：

我得到了正确的输出。谢谢。有没有办法缩进这个 json 对象，因为一系列字符太主流了。

你必须使用一些简短的代码美化插件来实现这一点，我以前没有做过这样的事情，可能还有一些apis 也可能为你提供格式化的json 只需一个 api 调用。

使用 JSON.stringify 也可以美化，我更新了我的答案和 plunker。也见this question。

已经这样做了。 :) 我是 angular2 的新手，如果可能的话，你能分享你的社交资料的任何细节。想向你学习。 :)

不切实际，我不再活跃在任何社交网络上，但我每天都访问 ***。您可以发布您的问题，我会尽力而为。你可以在 SO profile 上找到我的邮件。感谢您的善意考虑，但 SO 的人才和活跃的人比我多得多。

【参考方案4】：

要在 Angular 2 中绑定 textarea 值，您可以使用 change-function：

模板

<textarea id="some-value" (change)="doTextareaValueChange($event)">textareaValue</textarea>

组件

export class AppComponent implements OnInit 
  private textareaValue = '';
  doTextareaValueChange(ev) 
    try 
      this.textareaValue = ev.target.value;
     catch(e) 
      console.info('could not set textarea-value');
    
  

【参考方案5】：

除非您真的想在两者之间进行同步，否则您通常会在完成 json 编辑时实现一个按钮来保存/应用更改。如果是这样的话，你的渲染就很简单了。

<textarea #textbox> rapidPage | json </textarea>

确保上述行之间没有其他空格或返回字符。

然后是传统的按钮，例如。

<a (click)="updateRapidPage(textbox.value)">Apply</a>

我发现在某些情况下这比残酷的[(rapidPage)] 更好。

你也可以在组件内部使用@ViewChild('textbox') input来访问这个变量。

【讨论】：

很好的答案！这很简单，很容易工作。没有有趣的（[ngModel]）业务。

【参考方案6】：

你能用这个测试一下吗：

<textarea #textbox (change)="text = textbox.value" style="width:100%;"> text </textarea>

问候

【讨论】：

解释为什么此代码有效或您必须进行哪些更改以及为什么会对最初提出问题的人有所帮助。

应该为您的代码添加一个小提琴。这甚至不是答案。

【参考方案7】：

<textarea class="form-control" 
          name="message"
          rows="8"
          [(ngModel)]="Obj.message"
          #message='ngModel'
          ></textarea>

对于双向绑定您只需要在 textarea 标签中添加属性 name="message"，只有 [(ngModel)] 工作 100%！。

【讨论】：

很好的答案。有点奇怪，但显然[(ngModel)] 没有name 属性就无法工作。 - 话虽如此，我发现您的答案中的#message='ngModel' 有点令人困惑，因为这似乎没有必要并且似乎没有什么区别。

我的文本区域 [formControl] 绑定在我添加名称属性之前不起作用。谢谢！

我同意@ihorbond。我也一样。

不适用于 Angular 9，这是我的错误消息：Cannot assign value "$event" to template variable "message". Template variables are read-only.

【参考方案8】：

ngModel 工作如果

有一个包裹在它周围的表单，并且 textarea 添加了一个 name 属性。

如果你没有，你可以使用下面的语法来达到同样的效果

<textarea [value]="strVariableInComponent" (input)="strVariableInComponent = $event.target.value;"></textarea>