Ionic2: Input field, Why Im getting empty string in value

Question

This is my client side :

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

And in .ts :

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

If i print in the console the form.value inside addcomment()

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

and this.comment (AbstractControl type of variable inside class) is empty.

Thierry Templier · Accepted Answer · 2016-04-12T12:44:11.610

1

If you want to associate a control with your input you need to use the NgFormControl directive:

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

Don't set it into the comment property you bind with ngModel.

Edit

You also need to set your form on the form tag this way:

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

See this article for more details:

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

edited Apr 12 '16 at 12:44

answered Apr 12 '16 at 12:32

Thierry Templier

198,364
44
396
360

why this "console.log(form.value)" has to undefined from addcomment(form.value) – blackHawk Apr 12 '16 at 12:37
You need to leverage `the `ngFormModel` directive. In your case, you mix inline form definition and the explicit one using `FormBuilder`... – Thierry Templier Apr 12 '16 at 12:44
@Thiery Templier I really need your assistance on this http://stackoverflow.com/questions/37058817/what-is-the-language-ionic-2-is-built-on and http://stackoverflow.com/questions/37027055/how-to-acheive-look-and-feel-of-ionic2-css-in-angular2 – blackHawk May 05 '16 at 19:31

score 0 · Answer 2 · answered Apr 12 '16 at 12:24

0

This only updates comment from the input field

(ngModel) = 'comment'>

but the input field is not updated if comment changes.

Use instead two-way-binding

    [(ngModel)] = 'comment'>

Also you don't want to use the control as model. The model is where you want to maintain the value therefore it should be something like

    [(ngModel)] = 'commentValue'>

answered Apr 12 '16 at 12:24

Günter Zöchbauer

623,577
216
2,003
1,567

update from view to controller, right? i want this exactly same way from view to controller update not the opposite way – blackHawk Apr 12 '16 at 12:28
but this.comment is empty string – blackHawk Apr 12 '16 at 12:29
But if you never set a value, you can't expect it to have one. Binding the control in `this.comment` using `ngModel` is wrong. `(ngModel)="xxx"` doesn't do anything because if you don't use `[(xxx)]` you have to use `(ngModelChange)="comment"`. `comment` is expected to be an expression in this case therefore you probably want `(ngModelChange)="comment = $event"`. Another way might be to pass an initial value using `'comment': ['initialValue', Validators.required]` – Günter Zöchbauer Apr 12 '16 at 12:31

score 0 · Answer 3 · answered Apr 12 '16 at 12:40

Here is what i did in my project :

In the 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>

Note the #ngForm and the addComment(myForm) on the form tag. Note the [(ngModel)] and the required on the input tag. I also added a validation on the "Add Comment" button.

In the .ts :

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

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

Ionic2: Input field, Why Im getting empty string in value

3 Answers3