ngModel問題與離子複選框

我想寫一個模式與離子形式。出於某種原因，任何時候我將ngModel與<ion-checkbox>（或<ion-radio>）關聯在一起，我的模態就不會顯示出來（構造函數被調用）。ngModel問題與離子複選框

我的控制器：

import { Component } from '@angular/core'; 
import { NavController, NavParams, ViewController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-alert-modal', 
    templateUrl: 'alert-modal.html', 
}) 
export class AlertModalPage { 

    formData = {}; 

    constructor(public navCtrl: NavController, public navParams: NavParams, viewCtrl:ViewController) { 
    //this.formData = {xy:"", name:"", obd:""}; 
    console.log ("*** Modal constructor"); 

    } 

    logForm() { 
    console.log ("Submitted") 
    }

我的模板：

<ion-content padding> 

<form (ngSubmit)="logForm()"> 
    <ion-list-header>Trip Details</ion-list-header> 
    <ion-item> 
    <ion-label floating>Name your trip:</ion-label> 
    <ion-input [(ngModel)]="formData.name" name="tripname"></ion-input> 
    </ion-item> 

    <ion-item> 
    <ion-label>Track GPS lat/long</ion-label> 
    <!-- if I enable the line below, the modal does not show up --> 
    <!--<ion-checkbox [(ngModel)]="formData.xy"></ion-checkbox>--> 
    <ion-checkbox></ion-checkbox> 
    </ion-item> 

    <ion-item> 
    <ion-label>Read BLE OBD</ion-label> 
    <!-- if I enable the line below, the modal does not show up --> 
    <!--<ion-checkbox [(ngModel)]="formData.obd"></ion-checkbox>--> 
    <ion-checkbox></ion-checkbox> 
    </ion-item> 
</form> 
    <button ion-button block outline>Ok</button> 
</ion-content>

我離子信息：

cli packages: 

    @ionic/cli-plugin-cordova  : 1.5.0 
    @ionic/cli-plugin-ionic-angular : 1.4.0 
    @ionic/cli-utils    : 1.6.0 
    ionic (Ionic CLI)    : 3.6.0 

global packages: 

    Cordova CLI : 7.0.1 

local packages: 

    @ionic/app-scripts : 2.0.2 
    Cordova Platforms : android 6.2.3 ios 4.4.0 
    Ionic Framework : ionic-angular 3.5.3 

System: 

    Android SDK Tools : 25.2.5 
    Node    : v8.1.4 
    OS    : macOS Sierra 
    Xcode    : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy  : 1.9.0 
    ios-sim   : 5.0.2 
    npm    : 5.0.3

來源

2017-08-02 user1361529

問題解決了。我錯過了文檔中的這一部分

注意：如果在Form標記中使用ngModel，則必須提供名稱屬性。如果不這樣做，你必須在 ngModelOptions

獨立設置爲true，那麼這個工作：

<ion-item> 
    <ion-label>Track GPS lat/long</ion-label> 
    <ion-checkbox [(ngModel)]="formData.xy" name="xy"></ion-checkbox> 
</ion-item>

來源

2017-08-02 22:05:41 user1361529

ngModel問題與離子複選框

回答

相關問題