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

Question

我正在尝试使用 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
    };

我想将数据加载为字符串。任何输入？

原文由 Bhushan Gadekar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

---

StackBlitz 演示

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

  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>

原文由 Ankit Singh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Hasnain Ali Sohrani 发布，翻译遵循 CC BY-SA 4.0 许可协议