Прежде всего, извините, если это дубликат - я проверял некоторое время, но пока что ничего не решает мои сомнения.
Короче говоря, я работаю над приложением со многими формами.В большинстве из них ожидается, что если пользователь вернется из обычного представления «Подтверждение», где он увидит данные, которые он поместил (в случае, если он хочет его исключить), обратно в форму, форма должна сохранить эти данные.
Я использую реактивные формы для этого, и в большинстве случаев это работает.При инициализации компонента я проверяю, получила ли форма некоторую информацию через EventEmitter, который запускается из компонента подтверждения:
ngOnInit() {
if (this.cardData) {
this.retrievedFormData = {
amount: this.cardData.card.amount.amount,
card: {
number: this.cardData.card.number,
trade: this.cardData.card.trade,
type: this.cardData.card.type,
cardId: this.cardData.cardId,
},
}
this.initForm();
}
initForm () инициализирует реактивную форму, и каждый параметр проверяет, получил ли компонент предыдущие данные, которыехранится как объект retrievedFormData.Пример:
this.formGroup = this.formBuilder.group({
amount: [(this.retrievedFormData ? this.retrievedFormData.amount : null),
[Validators.required, Validators.min(0.01), Validators.pattern(amountRegex)]],
})
Таким образом, параметры могут легко «автоматически заполнить» себя, если форма получит данные.
Во всем приложении есть только один элемент, который не заполняется должным образом.У меня есть ion-select, который содержит обычные опции * ngFor.Каждый параметр является объектом, содержащим 4 параметра.
html:
<ion-select name="card" formControlName="card" okText="{{ 'COMMON.OK' | translate }}" cancelText="{{ 'COMMON.CANCEL' | translate }}"(ionChange)="handleCardSelection($event)" >
<ion-option *ngFor="let card of cards" [value]="card">{{card.number}} - {{card.type}}</ion-option>
</ion-select>
'card' был инициализирован как AbstractControl, и у объекта есть 4 параметра, из которых пользователь видит два ввыпадающий список, номер карты и тип (кредит / дебет).Все параметры, tho, сохраняются через ionChange , расположенный в ion-select, который вызывает метод в компоненте с именем handleCardSelection () , который хранит значение объекта.параметры:
handleCardSelection(card) {
this.chosenCardData = {
cardId: card.id,
type: card.type,
trade: card.trade,
number: card.number
};
}
Все работает хорошо и модно, когда таймер отправляет данные и отправляет их в представление подтверждения.Однако, когда я пытаюсь вернуться, мой ion-select не загружает предварительно полученную информацию (и я несколько раз проверял, что Форма действительно возвращает всю свою информацию, поэтому объект карты появляется).
Как и в примере выше с количеством карт, я пытаюсь проверить компонент, получил ли он объект «карта»:
card: [(this.retrievedFormData ? this.retrievedFormData.card : null),
Validators.required],
и ниже, отражая форму formControlName, котораяЯ назначил ионному отбору:
this.cardFC = this.formGroup.get('card');
Но что бы я ни пытался, ионный отбор будет не автоматически выбирать опцию, соответствующую полученной информации.
Итак, после всего этого мой вопрос будет следующим:
(ionChange), кажется, событие, которое устанавливает саму опцию.
<ion-select name="card" formControlName="card" (ionChange)="handleCardSelection($event)">
С тех пор (ionChangeКажется, что он запускается только ручным вводом, и я хотел бы активировать его автоматически, если компонент обнаружит, что он получил информацию ... Есть ли способ запустить этот ionChange из самого компонента?Таким образом, во время того же ngOnInit, который проверяет предыдущую информацию и сохраняет ее, я могу запустить событие, чтобы предварительно выбрать карту, которая соответствует полученным данным.
Редактировать: так как Сурадж упомянул об этом (и это не былоЭто плохой подход), я попытался вызвать handleCardSelection() из ngOnInit, но это не дало никакого эффекта
Заранее спасибо всем, кто может пролить свет.