angular - 如何在 Ionic 中使用相同的模型进行添加和编辑

问题描述

我正在为 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()"

这是用于添加送货地址，我想在编辑表格时替换此功能。

任何帮助深表感谢。

标签： angularionic-frameworkionic3

angular - 如何在 Ionic 中使用相同的模型进行添加和编辑

问题描述

解决方案

推荐阅读