0

Задача такая: массив FormArray со списком вопросов, в каждом из вопросов есть массив FormArray со списком вариантов. Добавляем вопросы, к ним добавляем варианты ответов, все это пишется в FormArray.

Это работает, но почему то при каждом нажатии клавиши, когда курсор в input курсор становится неактивным и приходится снова нажимать в поле ввода. То есть чтобы ввести слово, нужно буква-щелк-буква-щелк-буква-клац, постоянно тыкать мышкой в поле ввода....

Помогите пожалуйста разобраться с этой проблемой!

Код компонента:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormArray, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-add-poll',
  templateUrl: './add-poll.component.html',
  styleUrls: ['./add-poll.component.css']
})
export class AddPollComponent implements OnInit {

  data = {
    questions: [
      {
        questionName: 'example Question',
        variants: [
          {
            variantName: 'example variant',
          }
        ]
      },
    ]
  };

  pollForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.pollForm = this.fb.group({
      pollName: [''],
      pollDescription: [''],
      questions: this.fb.array([])
    });
    this.setQuestions();
  }

  ngOnInit() {
  }

  get questions() {
    return this.pollForm.get('questions') as FormArray;
  }

  addNewQuestion() {
    const control = <FormArray>this.pollForm.controls.questions;
    control.push(
      this.fb.group({
        question: [''],
        variants: this.fb.array([])
      })
    );
  }

  deleteQuestion(index: number) {
    const control = <FormArray>this.pollForm.controls.questions;
    control.removeAt(index);
  }

  addNewVariant(control) {
    console.log('www ', control);
    control.push(
      this.fb.group({
        variantName: ['']
      }));
  }

  deleteVariant(control, index: number) {
    control.removeAt(index);
  }

  setQuestions() {
    const control = <FormArray>this.pollForm.controls.questions;
    this.data.questions.forEach((x) => {
      control.push(this.fb.group({
        question: x.questionName,
        variants: this.setVariants(x)
      }));
    });
  }


  setVariants(x) {
    const arr = new FormArray([]);
    x.variants.forEach((y) => {
      arr.push(this.fb.group({
        variantName: y.variantName
      }));
    });
    return arr;
  }

}

Код шаблона:

<form [formGroup]="pollForm">

  <nb-card>
    <nb-card-header>
      <label class="label" for="input-text">Название опроса:</label>
      <input nbInput placeholder="Новый опрос" fullWidth formControlName="pollName">
    </nb-card-header>
    <nb-card-body>
      <label class="label" for="input-text">Описание:</label>
      <textarea nbInput placeholder="Введите описание опроса" fullWidth formControlName="pollDescription"></textarea>
    </nb-card-body>
  </nb-card>

  <div formArrayName="questions">
    <div *ngFor="let q of questions.controls; let i = index">
      <div [formGroupName]="i">
        <nb-card>
          <nb-card-header>
            <label class="label" for="input-text">Вопрос {{ i + 1 }}</label>
            <textarea nbInput placeholder="Введите здесь текст вопроса" fullWidth formControlName="question"></textarea>
          </nb-card-header>
          <nb-card-body>
            <div formArrayName="variants">
              <div *ngFor="let var of q.get('variants').value; let ind = index">
                <div [formGroupName]="ind">
                  <label class="label" for="input-text">Вариант {{ ind + 1 }}</label>
                  <input nbInput placeholder="Новый вариант ответа" fullWidth formControlName="variantName">
                </div>
              </div>
              <div class="mt-2">
                <button nbButton size="xsmall" fullWidth outline status="info"
                  (click)="addNewVariant(q.controls.variants)">Добавить вариант ответа</button>
              </div>
            </div>
          </nb-card-body>
        </nb-card>

      </div>
    </div>
  </div>
  <br>

  <button nbButton fullWidth status="info" (click)="addNewQuestion()">Добавить вопрос</button>

</form>

Также прикладываю ссылку на работающий пример

1 ответ 1

0

Чтобы все заработало нормально, вынес геттер из цикла в компонент, то есть

*ngFor="let var of q.get('variants').value; let ind = index"

заменил на

<div *ngFor="let var of getVariants(q); let ind = index">

и в компоненте добавил

  getVariants(q) {
     return q.get('variants').controls as FormArray;
  }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.