NgModel для текстового поля, не работающего в angular2

Я пытаюсь напечатать объект json в textarea с помощью ngModel.

Я сделал следующее:

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

Я хочу загрузить объект json в textarea. Вышеприведенный код загружает объект rapidPage в textarea, но показывает значение textarea как [object Object].

объект:

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

Я хочу загрузить данные в виде строки. любые входы?

Ответ 1

Предполагая, что вы хотите привязать rapidPage как есть, и будет писать только действительный JSON в textArea.

Вам нужно PARSE при изменении значения и STRINGIFY при показе в textarea.

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>

Ответ 2

Для привязки значений textarea в Angular 2 вы можете использовать функцию change:

Шаблон

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

Ответ 3

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

Для двухстороннего связывания Вам просто нужно добавить атрибут в тег textarea name="message", ТОЛЬКО [(ngModel)] работает на 100% !.

Ответ 4

Если вы действительно хотите синхронизировать между собой, вы обычно будете использовать кнопку, чтобы сохранить/применить изменения, когда закончите редактирование json. Если это так, ваш рендер легко.

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

Убедитесь, что между указанной строкой не осталось другого пробела или символа возврата.

Затем традиционная кнопка, например.

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

Я обнаружил, что в лучшем случае это лучше, чем жестокое [(rapidPage)].

Вы также можете использовать @ViewChild('textbox') input внутри компонента для доступа к этой переменной.

Ответ 5

Можете ли вы проверить это:

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

С уважением

Ответ 6

В соответствии с документацией [()] для двухстороннего синтаксического сахара удаляется шаблон. Какое событие вызывается при этом? Независимо, вы можете поместить вывод строки также вместе с событием в нижнем коде

Возможно, попробуйте выполнить приведенную ниже последовательность кода для вывода строки

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

Ответ 7

Вы можете 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);

Рабочий пример Рабочий пример

Браузер показывает [object object], потому что angular не позволяет разобрать JSON, чтобы присвоить значение в ngModel, вам понадобится строка поэтому конвертируйте это с помощью JSON.stringify