带有formControlName的Ionic2复选框

时间:2016-12-22 07:09:05

标签: angular typescript ionic2

实际上我在ionic2中使用复选框时遇到了问题。

我使用复选框:

<ion-item>
    <ion-label>Agree</ion-label>
    <ion-checkbox color="dark" id="agree" name='agree' class="form-control" formControlName="agree" [checked]="false" ></ion-checkbox>
  </ion-item>

在.ts中我的价值是:

console.log(this.timelogForm.controls['agree'].value);

我希望最初不加以检查。

我的问题是:

  1. 使用formControlName =“同意”它被检查..

  2. 如果曾经点击过,我会在.ts中获得它的价值,但我想如果没有点击提交我会得到错误,如果选中我就会得到真的......

  3. 请帮助

3 个答案:

答案 0 :(得分:2)

我自己解决了这个问题,希望能帮助别人......

我将其值设置为false,如:

this.logForm = formBuilder.group({
        'agree': ['false'],
    });

希望它有所帮助。

答案 1 :(得分:0)

它的工作。我希望它会对你有所帮助。

<强> test.ts

import { Component } from '@angular/core';
import { NavController, Events } from 'ionic-angular';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
    templateUrl: 'test.html'
})
export class test implements OnInit {
    logform: FormGroup;
    forgotPasswordEmail: any;
    constructor(private _navCtrl: NavController, private _fb: FormBuilder) { }
    ngOnInit() {
        this.logform = this._fb.group({
            ckeckbox: ['false', Validators.required]
        });
    }
}

<强>的test.html

<ion-item>
    <ion-label>Daenerys Targaryen</ion-label>
    <ion-checkbox color="dark" formControlName="ckeckbox" checked="false"></ion-checkbox>
</ion-item>

答案 2 :(得分:0)

test.ts

buildForm(){
    this.accountForm = this.formBuilder.group({
        generalTerms: ['', Validators.requiredTrue]
    });
}

test.html

<form [formGroup]="accountForm">
    <ion-item class="center">
        <ion-checkbox formControlName="generalTerms" checked="false"></ion-checkbox>
        <ion-label>Accepter les conditions générale</ion-label>
    </ion-item>
    <ion-item class="button" lines="none">
        <ion-button color="primary [disabled]="accountForm.invalid" 
        (click)="save()">
        Valider
        </ion-button>
    </ion-item>
</form>