Отображение одного вопроса за раз в угловой реактивной форме

Question

У меня есть три вопроса в моей реактивной форме Angular, которые очень просты.

Я хочу отображать пользователю только один вопрос за раз, и при нажатии на следующую кнопку должен появиться следующий вопрос. (Под каждым вопросом должна быть следующая кнопка). Пожалуйста, помогите мне достичь этого. Заранее спасибо.

код стекаблика

Answer 1

Вы можете сделать процесс динамичным, сохраняя вопросы в массиве.

Попробуйте так:

Рабочая демонстрация

TS:

  questions = [
    {type: "name", description : "What is your name ?", isHidden:false},
    {type: "email", description : "What is your email ?", isHidden:true},
    {type: "message", description : "What is your message ?", isHidden:true}
  ]

Шаблон:

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
    <ng-container *ngFor="let item of questions;let i = index">
        <div [hidden]="item.isHidden">
            {{item.description}} <input [formControlName]="item.type" placeholder="Your {{item.type}}"><br>
            <button  (click)="questions[i].isHidden = true;questions[i + 1] ?questions[i + 1].isHidden = false : false">Next</button>
        </div>
    </ng-container>
</form>

Answer 2

Я сделал это в вашей Реактивной форме. Пожалуйста, проверьте.

Stackblitz Рабочий пример

Компонент

  myForm: FormGroup;
  currentQuestionIndex = 0;
  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl('Benedict'),
      email: new FormControl(''),
      message: new FormControl(''),
      questions: new FormArray([
        new FormControl('This is Q1'),
        new FormControl('This is Q2'),
        new FormControl('This is Q3')
      ])
    });
  }

HTML

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
    What is your name ? <input formControlName="name" placeholder="Your name"><br>
    What is your email? <input formControlName="email" placeholder="Your email"><br>
    What is your message? <input formControlName="message" placeholder="Your message"><br>
    <p>
       Questions: {{ myForm.get('questions').value[currentQuestionIndex] }}
    </p>

  <button type="button" (click)="currentQuestionIndex = currentQuestionIndex - 1">Previous</button>
   &nbsp;
  <button type="button" (click)="currentQuestionIndex = currentQuestionIndex + 1">Next</button>    
</form>

Answer 3

В вашем app.component.ts объявите

step = 1;

app.component.html

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
  <ng-container *ngIf="step >= 1">
    What is your name ? <input formControlName="name" placeholder="Your name"><br>
  </ng-container>
  <ng-container *ngIf="step >= 2"> 
  What is your email? <input formControlName="email" placeholder="Your email"><br>
  </ng-container>
  <ng-container *ngIf="step >= 3">
    What is your message? <input formControlName="message" placeholder="Your message"><br>
  </ng-container>
  <button *ngIf="step <= 2" (click)="step = step + 1;">Next</button>

</form>

После нажатия следующей кнопки шаг переменной увеличивается на единицу, и он покажет вам следующеевопрос. Stack Blitz Link