Ionic2：输入字段，为什么我的值是空字符串答案

【问题标题】：Ionic2: Input field, Why Im getting empty string in valueIonic2：输入字段，为什么我的值是空字符串
【发布时间】：2016-08-03 01:20:23
【问题描述】：

这是我的客户端：

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

在 .ts 中：

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

如果我在控制台中打印form.value 内的addcomment()

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

而this.comment（类内变量的AbstractControl类型）为空。

【问题讨论】：

标签： angularjs angular ionic2 ionic-view angular2-forms

【解决方案1】：

如果您想将控件与您的输入相关联，您需要使用NgFormControl 指令：

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

不要将其设置到您与ngModel 绑定的comment 属性中。

编辑

您还需要通过这种方式在表单标签上设置表单：

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

查看这篇文章了解更多详情：

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

【讨论】：

为什么这个“console.log(form.value)”必须从 addcomment(form.value) 中未定义
您需要利用 the ngFormModel` 指令。在您的情况下，您将内联表单定义和使用 FormBuilder... 的显式定义混合在一起
@Thiery Templier 在stackoverflow.com/questions/37058817/… 和stackoverflow.com/questions/37027055/… 上我真的需要你的帮助

【解决方案2】：

这只会从输入字段更新comment

(ngModel) = 'comment'>

但如果comment 更改，输入字段不会更新。

改用双向绑定

    [(ngModel)] = 'comment'>

您也不想将控件用作模型。该模型是您想要保持价值的地方，因此它应该类似于

    [(ngModel)] = 'commentValue'>

【讨论】：

从视图更新到控制器，对吧？我希望从视图到控制器更新的方式完全相同，而不是相反
但是 this.comment 是空字符串
但是如果你从不设置一个值，你就不能指望它有一个。使用ngModel 绑定this.comment 中的控件是错误的。 (ngModel)="xxx" 没有做任何事情，因为如果你不使用[(xxx)]，你必须使用(ngModelChange)="comment"。在这种情况下，comment 应该是一个表达式，因此您可能需要(ngModelChange)="comment = $event"。另一种方法可能是使用 'comment': ['initialValue', Validators.required] 传递初始值

【解决方案3】：

这是我在项目中所做的：

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

注意表单标签上的#ngForm 和addComment(myForm)。注意输入标签上的[(ngModel)] 和required。我还在“添加评论”button 上添加了验证。

在 .ts 中：

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

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

【讨论】：