web-dev-qa-db-fra.com

ngModèle pour textarea ne fonctionne pas dans angular2

J'essaie d'imprimer l'objet json dans textarea en utilisant ngModel.

J'ai fait suite à:

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

Je veux charger l'objet json dans textarea. Le code ci-dessus charge l'objet rapidPage dans textarea, mais affiche sa valeur textarea comme [object Object].

objet:

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

Je veux charger les données sous forme de chaîne . Des entrées?

javascripthtmljsonangular
14
Bhushan Gadekar

En supposant que vous souhaitiez lier rapidPage tel quel et que vous n'écririez que du JSON valide dans textArea.

  • Vous devez PARSE lors de la modification de la valeur et STRINGIFY lors de l'affichage dans textarea.

PLUNKER DEMO

Faites ce qui suit dans votre code de composant

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

Utilisation du modèle: 

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

Pour relier les valeurs textarea dans Angular 2, vous pouvez utiliser la fonction de changement:

Modèle

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

Composant

export class AppComponent implements OnInit {
  private textareaValue = '';
  doTextareaValueChange(ev) {
    try {
      this.textareaValue = ev.target.value;
    } catch(e) {
      console.info('could not set textarea-value');
    }
  }
}
9
Markus Brunner
<textarea class="form-control" 
          name="message"
          rows="8"
          [(ngModel)]="Obj.message"
          #message='ngModel'
          ></textarea>

Vous devez simplement ajouter un attribut dans la balise textarea name="message", UNIQUEMENT [(ngModel)] fonctionne à 100%!.

4
Hasnain Ali Sohrani

Sauf si vous voulez vraiment avoir une synchronisation entre vous, vous devriez normalement implémenter un bouton pour enregistrer/appliquer les modifications une fois l’édition terminée. Si tel est le cas, votre rendu est facile.

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

Assurez-vous qu'aucun autre caractère ou caractère de retour ne se trouve entre la ligne ci-dessus.

Puis un bouton traditionnel, ex. 

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

J'ai trouvé que c'était mieux dans certains cas que [(rapidPage)] brutal.

Vous pouvez également utiliser @ViewChild('textbox') input dans le composant pour accéder à cette variable.

3
windmaomao

Pouvez-vous tester avec ceci:

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

Cordialement

1
Oscar Adrian Luevano Cadena

Selon la documentation, [()] est un sucre à syntaxe bidirectionnelle permettant de retirer le passe-partout. Quel événement est invoqué à cela? Indépendamment, vous pouvez mettre une sortie de chaîne également avec l'événement dans le code ci-dessous

Essayez probablement l’implémentation de code ci-dessous pour votre sortie de chaîne

@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

Vous pouvez stringify votre json et l'utiliser dans le ngModel comme ceci -

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

Exemple de travail Working Example

Le navigateur affiche [object object] car angular ne permet pas d’analyser le JSON, ni de définir la valeur dans ngModel. Une chaîne est nécessaire pour la convertir. Utilisez donc JSON.stringify

0
Pardeep Jain