Question

我的angula2 / ionic2应用程序中有一个类似的表单：

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

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

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

有了这个，我收到一个错误：TypeError: Cannot create property 'validator' on number '14808.18276685957'

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

我做错了什么？

更新：我收到两个NavParams并将其值分配给表单控件，以便预先填充该值。看起来它正在抛出一些验证错误Cannot create property 'validator' on number '14772.975244232435'，这是路径

Answer 1

将大小和路径字段的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>

但是，如果有人可以指出ngControl和ngFormControl之间有什么区别，那就太好了。

Answer 2

如果要使用模型表单，则需要以这种方式引用字段控件：

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

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

Angular2错误：无法在数字上创建属性'validator'

2 个答案: