Question

这是我的客户方：

<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类型的变量）为空。

Answer 1

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

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

请勿将其设置为与comment绑定的ngModel媒体资源。

修改

您还需要以这种方式在表单标记上设置表单：

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

有关详细信息，请参阅此文章：

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

Answer 2

这只会从输入字段

更新comment

(ngModel) = 'comment'>

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

改为使用双向绑定

    [(ngModel)] = 'comment'>

此外，您不想将控件用作模型。该模型是您希望保持值的位置，因此它应该类似于

    [(ngModel)] = 'commentValue'>

Answer 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。我还在＆＃34;添加评论＆＃34;上添加了验证。 button。

在.ts：

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

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

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

3 个答案: