Я работаю в приложении Ionic Ecommerce и работаю над двумя функциями для добавления и редактирования адреса доставки.
Я использовал модал для добавления адреса доставки, и я хочу использовать тот жемодальный для редактирования адреса доставки.
Это мой shipping.html :
<ion-header>
<ion-navbar>
<ion-buttons>
<button style="border: 1px solid;" navPop>
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2 class="myformh2">Add Your Shipping Address</h2>
<form [formGroup]="shippingdet" (ngSubmit)="getShippingDetails()">
<ion-list>
<ion-item class="newitem2">
<ion-input placeholder="Name" type="text" [(ngModel)]="userData.shipping_name" formControlName="shipping_name"
required></ion-input>
</ion-item>
<ion-item class="newitem2">
<ion-input placeholder="Mobile Number" type="number" [(ngModel)]="userData.shipp_mob" formControlName="shipp_mob"
required></ion-input>
</ion-item>
<ion-item class="newitem2">
<ion-input placeholder="Country" type="text" value="India" disabled></ion-input>
</ion-item>
<ion-item class="newitem2">
<ion-select placeholder="Select State" [(ngModel)]="userData.shipp_state" formControlName="shipp_state"
required (ionChange)="onChange(userData.shipp_state)">
<ion-option *ngFor="let pstate of this.statesdetails" value="{{pstate.state_id}}">{{pstate.state_name}}</ion-option>
</ion-select>
</ion-item>
<ion-item class="newitem2">
<ion-select placeholder="Select City" [(ngModel)]="userData.shipp_city" formControlName="shipp_city" required>
<ion-option *ngFor="let pcity of this.citiesdetails" value="{{pcity.city_id}}">{{pcity.city_name}}</ion-option>
</ion-select>
</ion-item>
<ion-item class="newitem2">
<ion-input placeholder="Pincode" type="number" [(ngModel)]="userData.shipp_code" formControlName="shipp_code"
required></ion-input>
</ion-item>
<ion-item class="newitem2">
<textarea placeholder="Address" [(ngModel)]="userData.shipping_address" formControlName="shipping_address"
required></textarea>
</ion-item>
<div>
<button [disabled]="!shippingdet.valid" ion-button type="submit" class="newbtn11" color="primary" block>Submit</button>
</div>
</ion-list>
</form>
</ion-content>
Это мой модал, который я использовал для добавления адреса доставки иЯ хочу использовать тот же модал для редактирования адреса доставки.
Когда пользователь нажимает для редактирования, он должен показывать, Изменить адрес доставки вместо Добавить доставкуАдрес , а также текст кнопки должны обновляться как «Обновление» и функция также.
Это мой shipping.ts :
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { Storage } from '@ionic/storage';
@IonicPage()
@Component({
selector: 'page-shipping',
templateUrl: 'shipping.html',
})
export class ShippingPage {
shippingdet : FormGroup;
userData = {"shipping_name": "", "shipp_mob": "", "shipp_code": "", "shipp_state": "", "shipp_city": "", "shipping_address": "",};
states: any = [];
statesdetails: any = [];
cities: any = [];
citiesdetails: any = [];
responseData2: any;
editdeta: any;
constructor(public navCtrl: NavController, public navParams: NavParams,
private formBuilder: FormBuilder, public restProvider: RestapiProvider,
private storage: Storage) {
this.shippingdet = this.formBuilder.group({
shipping_name: ['', Validators.required],
shipp_mob: ['', Validators.required],
shipp_code: ['', Validators.required],
shipp_state: ['', Validators.required],
shipp_city: ['', Validators.required],
shipping_address: ['', Validators.required],
});
if(navParams.get('itm'))
{
console.log(navParams.get('itm'));
this.editdeta = navParams.get('itm');
this.editshippingUser();
}
this.getAllStates();
}
getShippingDetails()
{
this.storage.get("ID").then((val) =>
{
if(val)
{
this.addShippingUsers(val);
}
else
{
console.log("Please Login");
}
});
this.closeModal();
}
getAllStates()
{
this.restProvider.getstates()
.then(data => {
this.states = data;
this.statesdetails = this.states.msg.states;
});
}
onChange(selectedstate){
this.getAllCities(selectedstate);
}
getAllCities($cid)
{
this.restProvider.getcities($cid)
.then(data => {
this.cities = data;
this.citiesdetails = this.cities.msg.city;
});
}
addShippingUsers($usid)
{
this.shippingdet.controls;
this.restProvider.addshipping(this.userData, 'delivery_address/'+$usid).subscribe((data) => {
if (data) {
this.responseData2 = data;
}
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad ShippingPage');
}
closeModal() {
this.navCtrl.pop();
}
editshippingUser()
{
this.userData.shipping_name = this.editdeta.name;
this.userData.shipp_mob = this.editdeta.mobile;
this.userData.shipp_code = this.editdeta.pincode;
this.userData.shipp_state = this.editdeta.state_id;
this.userData.shipp_city = this.editdeta.city_id;
this.userData.shipping_address = this.editdeta.address;
}
}
В этом файле TS, Я получаю этот параметр для обновления if(navParams.get('itm')), и когда этот параметр существует, я должен обновить текст в модале, а также функцию.
Это мой модал для добавления адреса доставки, и япри редактировании адреса доставки используется та же модель, но проблема в том, что я не могу показать адрес для изменения адреса доставки и обновить текст кнопки, а также обновить функцию в форме.
(ngSubmit) = "getShippingDetails ()"
Это для добавления адреса доставки, и я хочу заменить эту функцию при редактировании формы.
Любая помощь очень ценится.
