2017-01-23 81 views
2

我尝试在我的项目中创建一个动态表单,并且我有一些单选按钮。我想默认检查其中的一个。我尝试这样做:Ionic 2:表单中的单选按钮,默认选中

<input *ngIf="fieldForm.value.type == 'date'" type="date" formControlName="field"> 
    <div *ngIf="fieldForm.value.type == 'radio'"> 
    <div *ngFor="let option of fieldForm.value.options.values" > 
     <label><input type="radio" formControlName="field" value="{{option}}">{{option}}</label> 
    </div> 
    <div> 
     <label><input type="radio" formControlName="field" value="Toto" checked="checked">Toto</label> 
    </div> 
    </div> 

但它不工作。我不明白我必须做什么。有人有一个想法?

+0

你可以试试'checked =“true”'。 –

回答

1

这没关系!我找到了一个解决方案!

在我的html:

<div *ngIf="fieldForm.value.type == 'radio'"> 
    <ion-list formControlName="field" radio-group [(ngModel)]="value"> 
     <ion-item *ngFor="let option of fieldForm.value.options.values" > 
     <ion-label>{{option.label}}</ion-label> 
     <ion-radio value="{{option.value}}"></ion-radio> 
     </ion-item> 

    </ion-list> 
    </div> 

的 “ngModel” 许可证获取所选的值。我必须在我的.ts文件中用正确的值初始化它。

0

轻松所有你需要的只是删除:检查=“检查”

所以你的代码如下:

<input *ngIf="fieldForm.value.type == 'date'" type="date" formControlName="field"> 
    <div *ngIf="fieldForm.value.type == 'radio'"> 
    <div *ngFor="let option of fieldForm.value.options.values" > 
     <label><input type="radio" formControlName="field" value="{{option}}">{{option}}</label> 
    </div> 
    <div> 
     <label><input type="radio" formControlName="field" value="Toto">Toto</label> 
    </div> 
    </div>