Как получитьпоказать значение по умолчанию при загрузке формы с реактивной формой

Question

У меня есть много примеров этого.Используя FormGroup, Ion Select, значение всегда устанавливается правильно, но ничего не отображается, пока я не вручную открою select и закрою его.Такое поведение делает Реактивную форму совершенно бесполезной для редактирования или обновления, что фактически означает, что она бесполезна.У меня нет какой-либо формы, которая не требует выбора, и хотя она работает нормально для вставки новых значений, это означает, что я построил одну форму для вставки и другую совершенно другую форму для обновлений.

IЯ вставлю сюда немного кода, но я уверен, что все, кто использует 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

Я нашел ответ на основании комментария @Priya.У меня было несколько вариантов выбора со «статическими» параметрами:

<ion-select type="input" name="country_id" formControlName="country_id">
   <ion-option value="CA">Canada</ion-option>
   <ion-option value="US">United States</ion-option>
</ion-select>

Изменение их для использования * ng для фиксированных:

в файле .ts:

public countryOptions = [
   { value: 'CA', displayValue: 'Canada' },
   { value: 'US', displayValue: 'United States' }
];

и в файле .html:

<ion-select type="input" name="country_id" formControlName="country_id">
   <ion-option *ngFor="let country of countryOptions" value="{{ country.value }}">{{ country.displayValue }}</ion-option>
</ion-select>

Я должен отметить, что с одним из Ionic Updates что-то было исправлено (я не знаю что), но внезапно некоторые из селекторов, которые работали несколько месяцевназад, снова начал работать.

Во всех других вариантах выбора это была в основном некоторая комбинация использования * ngFor

Обратите внимание, что я просто ввел код в этот ответ, так что может быть несколько опечаток ... ноОтвет в том, что использование * ngFor для параметров исправляет все.

Answer 2

Таким образом, пока нет простого исправления, текущий обходной путь в вашем случае будет следующим:

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

Наличие [selected]="true" на вашем ion-option покажет его как выбранное значение в ion-select

РЕДАКТИРОВАТЬ

Хорошо, что не работает при использовании форм.Хорошо.Итак, я создал Plunkr, в котором это на самом деле работает .Как вы можете видеть в home.page.ts, selectedCountry - это 2 («США»), но в FormBuilder я пропускаю «3», что означает «DE».

В случае удаления планкера, код ниже.

<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]
    });
  }

Выход: