Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angular – 无法在Reactive表单上设置默认选择大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要加载< ion-SELEct>动态地处于被动状态.它运行正常.现在我需要设置认选择.我已经使用了所选属性.但是它没有工作.你能告诉我为什么吗?

这是the Plunker

应用程序/ 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
    ]
});
@H_801_36@

大佬总结

以上是大佬教程为你收集整理的angular – 无法在Reactive表单上设置默认选择全部内容,希望文章能够帮你解决angular – 无法在Reactive表单上设置默认选择所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。