大佬教程收集整理的这篇文章主要介绍了angular – 无法在Reactive表单上设置默认选择,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
应用程序/ 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 ] });
以上是大佬教程为你收集整理的angular – 无法在Reactive表单上设置默认选择全部内容,希望文章能够帮你解决angular – 无法在Reactive表单上设置默认选择所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。