Ionic2: Eingabefeld, warum Im leeren String in Wert

bekommt Dies ist meine Client-Seite:Ionic2: Eingabefeld, warum Im leeren String in Wert

<ion-card *ngFor="#p of posts | async"> 
    <ion-card-header> 
     {{p.title}} 
    </ion-card-header> 

    <ion-card-content> 
     <form [ngFormModel] = 'form' (ngSubmit) = 'addcomment(form.value, p.$key)'> 
      <ion-input type="text" placeholder="your comment" (ngModel) = 'comment'></ion-input> 
      <button>add comment</button> 
     </form> 
    </ion-card-content> 
</ion-card>

Und in .ts:

this.form = fb.group({ 
    'comment': ['', Validators.required] 
}); 
this.comment = this.form.controls['comment']

Wenn ich die form.value innerhalb addcomment() in der Konsole aus

Control {asyncValidator: null, _pristine: true, _touched: false, _value: "", _errors: Object…}

und this.comment (AbstractControl Art von Variable innerhalb der Klasse) leer ist .

Quelle

2016-04-12 blackHawk

sein, wenn Sie ein Steuerelement mit Ihrer Eingabe zuordnen wollen, müssen Sie die NgFormControl Direktive verwenden:

<ion-input type="text" placeholder="your comment" 
      [(ngModel)] = "comment" 
      [ngFormControl]="this.form.controls['comment']"> 
</ion-input>

Don‘ Setzen Sie es in die comment Eigenschaft, die Sie mit ngModel binden.

bearbeiten

Sie müssen auch Ihre Form auf dem Formular-Tag auf diese Weise festgelegt:

<form [ngFormModel]="form"> 
    (...) 
</form>

Lesen Sie diesen Artikel für weitere Informationen:

http://restlet.com/blog/2016/02/11/implementing-angular2-forms-beyond-basics-part-1/

Quelle

2016-04-12 12:32:39

Warum muss "console.log (form.value)" von addcomment (form.value) – blackHawk

Sie undefiniert sein muss die 'ngFormModel' Direktive nutzen. In deinem Fall mischst du die Inline-Formulardefinition und die explizite mit 'FormBuilder' ... –

@Tiery Templier Ich brauche deine Hilfe wirklich auf dieser http://stackoverflow.com/questions/37058817/what-is-the-language -ionic-2-is-built-on und http://stackoverflow.com/questions/37027055/how-to-ache-look-and-feel-of-ionic2-css-in-angular2 – blackHawk

Dieses nur Updates comment aus dem Eingabefeld

(ngModel) = 'comment'>

aber das Eingabefeld, wenn comment Änderungen nicht aktualisiert.

Verwenden statt Zwei-Wege-Bindung

[(ngModel)] = 'comment'>

Sie wollen ja auch nicht das Steuerelement als Modell verwenden. Das Modell ist in dem Sie den Wert halten wollen daher sollte es so etwas wie

[(ngModel)] = 'commentValue'>

Quelle

2016-04-12 12:24:53

Update im Hinblick auf Steuerung, nicht wahr?Ich möchte dies genau die gleiche Weise von der Ansicht Controller Update nicht umgekehrt – blackHawk

, aber this.comment ist leere Zeichenfolge – blackHawk

Aber wenn Sie nie einen Wert festlegen, können Sie nicht erwarten, dass es einen zu haben. Das Steuerelement in 'this.comment' mit' ngModel' zu binden ist falsch. '(ngModel) =" xxx "' tut nichts, denn wenn Sie '[(xxx)]' 'nicht verwenden, müssen Sie' (ngModelChange) = "comment" 'verwenden. 'comment' soll in diesem Fall ein Ausdruck sein, deshalb möchten Sie wahrscheinlich' (ngModelChange) = "comment = $ event" '. Ein anderer Weg könnte darin bestehen, einen Anfangswert mit ''comment' 'zu übergeben: [' initialValue ', Validators.required]' –

Er Re ist das, was ich in meinem Projekt tat:

Im HTML:

<form #myForm="ngForm" (ngSubmit)='addComment(myForm)'> 
    <ion-input type="text" placeholder="your comment" [(ngModel)]='model.comment' #comment="ngForm" required></ion-input> 
    <button [disabled]="!myForm.form.valid">add comment</button> 
</form>

Notiere die #ngForm und die addComment(myForm) auf dem Formular-Tag. Beachten Sie die [(ngModel)] und die required auf dem Eingabe-Tag. Ich habe auch eine Validierung auf den "Kommentar hinzufügen" button hinzugefügt.

In dem .ts:

constructor() { 
    this.model = { 
     comment: "" 
    }; 
} 

onLogin(form) { 
    if (form.valid) { 
     console.log(this.model); 
    } 
}

Quelle

2016-04-12 12:40:06 Guillaume

Antwort

Verwandte Themen