angular – 无法在Reactive表单上设置默认选择

发布时间：2020-12-17 17:09:25 所属栏目：安全来源：网络整理

导读：我需要加载 ion-select动态地处于被动状态.它运行正常.现在我需要设置默认选择.我已经使用了所选属性.但是它没有工作.你能告诉我为什么吗？这是 the Plunker 应用程序/ home.page.html form [formGroup]="detailInformationForm" (submit)="goToSponsor(det

我需要加载< 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
    ]
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!