我需要加载< ion-select>动态地处于被动状态.它运行正常.现在我需要设置默认选择.我已经使用了所选属性.但是它没有工作.你能告诉我为什么吗?
应用程序/ home.page.html
<form [formGroup]="detailInformationForm" (submit)="goToSponsor(detailInformationForm)" novalidate> <ion-item> <ion-label>Donation</ion-label> <ion-select formControlName="donationdate"> <ion-option *ngFor="let date of donationDates" value="{{date.donationdate}}" [selected]="date.isChecked"> {{date.donationdate}}</ion-option> </ion-select> </ion-item> <button ion-button block type="submit" [disabled]="!detailInformationForm.valid">Next</button> </form>
应用程序/ home.page.ts
export class HomePage { donationDates:any=[]; detailInformationForm: FormGroup; constructor(public navController: NavController,public formBuilder: FormBuilder) { this.donationDates = [ { id: null,donationid: "2",donationdate: "2017-03-12",datedescription: "Vad Bij",isChecked:true },{ id: null,donationdate: "2017-03-19",datedescription: "Sud satam",isChecked:false }] this.detailInformationForm = formBuilder.group({ donationdate: ['',Validators.required] }); } }
更新:
this.getDonation().then((val) => {//get Donation this.donation = val; if (this.donation.sponsordata == 1) { this.detailInformationForm.controls['attendees'].validator = Validators.required; } let donationDates = this.donation.donationdates; let dates = []; _.forEach(donationDates,function (value,key) { value.isChecked = false; if (key == 0) { value.isChecked = true; } dates.push(value); }); this.donationDates = dates; });
解决方法
被动形式的控制将管理所选项目.
而不是指定所选属性,只需指定值
要选择的捐赠日期控制:
this.donationDates = [ { id: null,isChecked: true },{ id: null,isChecked: false } ] const checked = this.donationDates.find(donationDate => donationDate.isChecked); this.detailInformationForm = formBuilder.group({ donationdate: [ checked ? checked.donationdate : null,Validators.required ] });