Блог

У меня есть серия форм, которые я пытаюсь отображать только по одной за раз, когда я просматриваю объект. Как только пользователь вводит там ответ и нажимает отправить, я хочу форму, в которой они были .hide() и следующую форму .show(). Вот видео, чтобы наглядно представить, что я имею в виду.

https://youtu.be/Cfo7xihCxDw

Это мой файл component.ts:

 import { Component, OnInit } from "@angular/core";
    declare var jQuery: any;
    
    @Component({
      selector: "app-home",
      templateUrl: "./home.component.html",
      styleUrls: ["./home.component.scss"],
    })
    export class HomeComponent implements OnInit {
      public show: boolean = false;
      public formName: any = "Show";
    
      cards = [
        {description: "Do you have a monthly student loan payment?"},
        {description: "Do you have a monthly car loan payment?"},
        {description: "Do you have a monthly car insurance payment?"},
        {description:"How much do you estimate you spend on gas for your car monthly?"},
        {description:"Do you have any monthly health/dental expenses?"}];

      ........
  

Это мой HTML-файл:

 </div>
      <form *ngFor="let card of cards;let i=index" ngForm #checkForm="ngForm" (submit)="getClicked(checkForm)" id="login-container">

      <div class="count"><h3>{{i 1}}/18</h3></div>

        <label><h1>{{card.description}}</h1></label>

        <label id="inputField"><i id="dollar" class="fas fa-dollar-sign"></i><i id="dollar" class="fas fa-dollar-sign"></i><i id="dollar" class="fas fa-dollar-sign"></i><input type="number" name="numbersInForm[card.description]" [(ngModel)]="numbersInForm[card.description]"
          id="input" class="form-input" placeholder="Ex: $100 or $0 if none"/></label>

      <button (click)="toggle()" type="submit">Next</button>

    </form>
  

Вот app.component.ts :

     import { Component, AfterViewInit } from '@angular/core';
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent implements AfterViewInit  {
        public count: number = 0;

        private _cards = [
            {descriptions: "Do you have a monthly student loan payment?"},
            {descriptions: "Do you have a monthly car insurance payment?"},
            {descriptions: "How much do you estimate you spend on gas for your car monthly?"},
            {descriptions: "Do you have any monthly health/dental expenses?"}
        ];
        public currentValue;
    
        ngAfterViewInit() {
          this.toggle()
        }
    
        getClicked(checkForm) {
    
        }
        toggle() {
          this.currentValue = this._cards[this.count].descriptions;
          document.getElementById('description').innerHTML = this.currentValue;
          document.getElementById('_count').innerHTML = (this.count   1).toString();
          this.count  = 1;
          if(this.count > 3) this.count = 0;
        }
    }
  

Здесь app.component.html :

 <form ngForm #checkForm="ngForm" (submit)="getClicked(checkForm)" id="login-container">

  <div class="count" id="_count"><h3></h3></div>

  <label><h1 id="description"></h1></label>

  <label id="inputField"><i id="dollar" class="fas fa-dollar-sign"></i><i id="dollar" class="fas fa-dollar-sign"></i><i id="dollar" class="fas fa-dollar-sign"></i><input type="number" name="currentValue" [(ngModel)]="currentValue"
    id="input" class="form-input" placeholder="Ex: $100 or $0 if none"/></label>

  <button (click)="toggle()" type="submit">Next</button>

</form>