web-dev-qa-db-ja.com

テキストエリアのngModelがangular2で機能しない

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

データを文字列としてロードしたい。入力はありますか？

javascripthtmljsonangular
21
Bhushan Gadekar

rapidPageをそのままバインドし、textAreaに有効なJSONのみを書き込むと仮定します。

  • 値を変更する場合はPARSE、テキストエリアに表示する場合はSTRINGIFYが必要です。

PLUNKER 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 style="background-color:black;color:white;" [(ngModel)]='rapidPageValue' rows="30" cols="120">                             
</textarea>
21
Ankit Singh

Angular 2のtextarea値をバインドするには、変更機能を使用できます。

テンプレート

<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');
    }
  }
}
10
Markus Brunner
<textarea class="form-control" 
          name="message"
          rows="8"
          [(ngModel)]="Obj.message"
          #message='ngModel'
          ></textarea>

双方向バインディングの場合、textareaタグname="message"に属性を追加するだけで、[(ngModel)]が100％動作するだけです！。

7
Hasnain Ali Sohrani

本当に同期を取りたい場合を除き、通常は、jsonの編集が終了したときに変更を保存/適用するボタンを実装します。その場合、レンダリングは簡単です。

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

上記の行の間に他のスペースやリターン文字がないことを確認してください。

次に、従来のボタン、例。

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

場合によっては、残忍な[(rapidPage)]よりも優れていることがわかりました。

コンポーネント内で@ViewChild('textbox') inputを使用して、この変数にアクセスすることもできます。

4
windmaomao

これでテストできますか：

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

よろしく

1
Oscar Adrian Luevano Cadena

ngModelは次の場合に機能します

  1. その周りにフォームがラップされており、textareaにはname属性が追加されています。

そうでない場合は、次の構文を使用して同じ効果を得ることができます

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

ドキュメンテーションによると、[（）]は定型文を削除するための双方向の構文シュガー用です。これでどのイベントが呼び出されますか？いずれにせよ、以下のコードでイベントとともに文字列出力を置くことができます

おそらく、文字列出力に対して以下のコード実装を試してください

@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
}
0
mattymanme

あなたのjsonをstringifyし、このように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を使用してこれを変換する必要があるためです。

0
Pardeep Jain