在 ionic 中重用表单的输入

Posted 2023-03-13

【中文标题】在 ionic 中重用表单的输入

【英文标题】：Reuse form's inputs in ionic

【发布时间】：2018-09-30 00:47:14

【问题描述】：

我在 ionic 中使用过这种形式的方法：

当我填写表格并提交时，会出现新幻灯片，但如果我重新启动应用程序，一切都会回到第一张。 我怎样才能解决这个问题？我想将这些输入保存在幻灯片中以再次使用它们...

部分代码：

.html:

<ion-slide *ngFor="let slide of slides">
  <ion-header>
    <ion-navbar>
      <ion-title text-center class="persian pdtop" > <ion-icon name = 'slide.icon'> </ion-icon> slide.ttl</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content padding>
    <img [src]="slide.image" class="slide-image"/>
    <h2 class="slide-title persian2" [innerhtml]="slide.title"></h2>
    <p class="persian" [innerHTML]="slide.description"></p>
  </ion-content>
</ion-slide>
<form [formGroup]="todo" (ngSubmit)="logForm()">
  <ion-item>
    <ion-label>Title</ion-label>
    <ion-input type="text" formControlName="title"></ion-input>
  </ion-item>    
  <ion-item>
    <ion-label>Icon</ion-label>
    <ion-input type="text" formControlName="icon"></ion-input>
  </ion-item>    
  <ion-item>
    <ion-label>Header</ion-label>
    <ion-input type="text" formControlName="ttl"></ion-input>
  </ion-item>    
  <ion-item>
    <ion-label>image</ion-label>
    <ion-input type="text" formControlName="image"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Description</ion-label>
    <ion-textarea formControlName="description"></ion-textarea>
  </ion-item>
  <button ion-button type="submit" [disabled]="!todo.valid">Submit</button>
</form>

.ts:

// ...
export class HomePage 
  private todo : FormGroup;
  constructor(public nav: NavController, private formBuilder: FormBuilder ) 
    this.todo = this.formBuilder.group(
      title: ['', Validators.required],
      description: [''],
      icon: [''],
      ttl: [''],
      image: [''],
    );
  

  logForm()
    console.log(this.todo.value);
    this.slides.push(this.todo.value);
  

  slides = [
    
      title: "HBD",
      description: "The <b>Ionic Component Documentation</b> showcases a number of useful components that are included out of the box with Ionic.",
      image: "",
      ttl: "no.1",
      icon: "heart",
    ,
    
      title: "What is Ionic?",
      description: "<b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and javascript.",
      image: "",
      ttl: "my love",
      icon: "heart",
    
  ];


//...

当我填写表格并提交时，会出现新幻灯片，但如果我重新启动应用程序，一切都会回到第一张。 我怎样才能解决这个问题？我想将这些输入保存在幻灯片中以再次使用它们...

【参考方案1】：

每次重启应用时，Slides 组件都会再次初始化，并且默认情况下始终在第一张幻灯片中初始化该组件（index=0）。

首先，您应该保存（在您的数据库、LocalStorage、提供程序等中）您要保留的幻灯片的索引。为此，您可以在每次更改幻灯片时使用 getActiveIndex() 方法。

如果你想在一张特定的幻灯片（比如你保存的那张）中初始化Slides组件，你可以使用属性：initialSlide，并设置它的索引号为你想要的幻灯片。

例如，如果你想在 index=2 的幻灯片中初始化 Slides 组件，你应该这样使用它：

<ion-slides intitialSlide="2">
  <ion-slide>
  </ion-slide>
<ion-slides>

有关幻灯片组件的更多信息，我建议阅读有关此的官方 Ionic 文档。

https://ionicframework.com/docs/api/components/slides/Slides

希望它能帮助您解决问题。