ionic3 - 如何让 <Ion-select> 在带有反应表单的表单加载上显示默认值

Question

我有很多这样的例子。使用 FormGroup、Ion Select，该值始终设置正确，但在我手动打开选择并关闭它之前没有任何显示。这种行为使得响应式(Reactive)表单对于编辑或更新完全无用，这实际上意味着它是无用的。我没有任何不需要选择的表单，虽然它确实可以正常插入新值，但这意味着我已经构建了一种用于插入的表单和另一种完全不同的用于更新的表单。

我将在这里粘贴一些代码，但我确信每个使用 Ionic 3 的人都已经看到了这个问题。什么时候修复，有解决方法吗？

<ion-content>
  <div *ngIf="loginForm">
  <form [formGroup]="loginForm" (submit)="doLogin()">
    <ion-list>

      <ion-item *ngIf="lookupsProvider">
           <ion-label fixed>{{ 'PHONE_COUNTRY_CODE' | translate }}</ion-label>
           <ion-select type="input" name="country_id" formControlName="country_id">
               <ion-option *ngFor="let country of lookupsProvider.lookupData['countrys']"
                      value="{{ country['id'] }}">
                  <ion-item>
                   {{  this.optionText(country) }}
                  </ion-item>
               </ion-option>

           </ion-select>
      </ion-item>

....当然还有其他输入

在 .ts 文件中

     _buildForm() {

     this.loginForm = this.formBuilder.group({
        country_id: [this.settingsProvider.settings['USER_ID'], Validators.required],
        main_phone: ['', Validators.required], 
        password: ['', Validators.required]
     });

     this.loginForm.valueChanges.subscribe((v) => {
        console.log('Login loginForm.valueChanges: ' + v);
     });
  }

正如我提到的，值设置正确，但用户看到的只是一个空白选择...这是登录表单，但我们知道用户的国家/地区，因此我们希望他们不必选择它。由于该值未显示，因此用户最终必须选择它以确保其已设置。

Answer 1

因此，在找到简单的解决方案之前，您的情况的当前解决方法如下:

<ion-select>
 <ion-option *ngFor="let country of countries" [selected]="country.id == userCountryId">
  ...
 </ion-option>
</ion-select>

ion-option 上有一个 [selected]="true" 会将其显示为 ion-select 中的选定值

编辑

好吧，哇，使用表单时这不起作用。好的。所以，我创建了a Plunkr in which this actually works 。正如您在 home.page.ts 中看到的 selectedCountry 是 2('USA')，但在 FormBuilder 中我传递了 ' 3'，即“DE”。

如果 plunkr 被删除，请使用下面的代码。

<ion-content padding>
  <p>No Form:</p>
  <ion-select>
    <ion-option *ngFor="let country of list" [selected]="country.id == selectedCountry">
      {{country.country}}
    </ion-option>
  </ion-select>

  <p>FORM: </p>
  <form [formGroup]="loginForm" (submit)="doLogin()">
      <ion-select formControlName="country_name">
        <ion-option *ngFor="let country of list" [value]="country.id">
          {{country.country}}
        </ion-option>
      </ion-select>
  </form>
</ion-content>

TS:

export class HomePage {

  appName = 'Ionic App';
  list = [
    {country: 'NL', id: 1},
    {country: 'USA', id: 2},
    {country: 'DE', id: 3}
    ];

  selectedCountry = 2;

  loginForm: FormGroup;

  constructor(public navController: NavController, fb: FormBuilder) { 
    this.loginForm = fb.group({
      "country_name": [3]
    });
  }

输出: