Angular2错误:不能在数字上创建属性“validator”。

I have a form like following in my angula2/ionic2 app:

我在angula2/ionic2 app中有如下表单:

<form [ngFormModel]="subscribeForm" (ngSubmit)="onSubmit(subscribeForm.value)">
        ...

        <ion-item>
            <ion-label floating>Survey object size</ion-label>
            <ion-input type="text" [ngFormControl]="size"></ion-input>
        </ion-item>

        <ion-item>
            <ion-label floating>Survey object path</ion-label>
            <ion-input type="text" [ngFormControl]="path" [(ngModel)]="path"></ion-input>
        </ion-item>

        <ion-item>
            <ion-label floating>Survey object type</ion-label>
            <ion-select [ngFormControl]="type">
                <ion-option *ngFor="let type of survey_types">{{type}}</ion-option>
            </ion-select>

        </ion-item>


        <br/><br/> 
        <button type="submit" class="custom-button" block>Submit</button>
    </form>

And I am handling it in my component as follows:

我在我的组件中处理它如下:

export class Subscription{

    subscribeForm: ControlGroup; 

    object_name: any;
    email: any;
    subscriber_name: any;
    size: any;
    path: any;
    cycle: AbstractControl;
    cycle_options=['ONCE', 'WEEKLY', 'MONTHELY']

    type: AbstractControl;
    survey_types=['FARM', 'SOLARPANEL', 'PLAIN']

    constructor(params: NavParams, private fb: FormBuilder) {

        this.size = params.get('size');
        this.path = params.get('path');

        this.subscribeForm = fb.group({
            'object_name': '',
            'email':'',
            'subscriber_name':'',
            'size':'',
            'path':'',
            'cycle':['', Validators.nullValidator],
            'object_type':['', Validators.nullValidator] 
        });

        this.object_name = this.subscribeForm.controls['object_name'];     
        this.email = this.subscribeForm.controls['email'];
        this.subscriber_name = this.subscribeForm.controls['subscriber_name'];
        this.cycle =  this.subscribeForm.controls['cycle'];
        this.type = this.subscribeForm.controls['type'];

    }

    onSubmit(value){

        console.log(value)
    }
}

With this I get an error: TypeError: Cannot create property 'validator' on number '14808.18276685957'

这样我就有了一个错误:TypeError:不能在数字'14808.18276685957'上创建属性'validator'。

There are two select fields in my form, I am not sure if I am using them correctly and binding their value correctly in my component.

在我的表单中有两个select字段，我不确定是否正确地使用它们，并在组件中正确地绑定它们的值。

What am I doing wrong?

我做错了什么?

UPDATE: I am getting two NavParams and assigning their value to a form control so that the value is pre-populated. It looks like it's throwing some validation error Cannot create property 'validator' on number '14772.975244232435' which is for path

更新:我得到了两个NavParams，并将它们的值分配给一个表单控件，以使该值是预填充的。它看起来好像是在抛出一些验证错误，不能创建用于路径的“14772.975244232435”的属性“validator”。

2 个解决方案

#1

Changing ngFormControl to ngControl for size and path fields solved the problem.

将ngFormControl改为ngControl来解决大小和路径问题。

<ion-item>
    <ion-label floating>Survey object size</ion-label>
    <ion-input type="text" ngControl="size" [ngModel]="size" ></ion-input>
</ion-item>

<ion-item>
    <ion-label floating>Survey object path</ion-label>
    <ion-input type="text" ngControl="path" [ngModel]="path"></ion-input>
</ion-item>

However, if someone could point out what's the difference between ngControl and ngFormControl, that would be nice.

然而，如果有人能指出ngControl和ngFormControl之间的区别，那就太好了。

#2

When you want to use model form, you need to reference the field control this way:

当您想要使用模型形式时，您需要以这种方式引用字段控制:

<ion-input type="text"
   [ngFormControl]="subscribeForm.contrls.size"></ion-input>

The ngFormControl directive aims to reference an existing control.

ngFormControl指令旨在引用现有控件。

#1