Как динамически добавить несколько полей, чтобы все эти значения сохранялись в массиве в реактивной форме с использованием Angular 6? - PullRequest
Новая
       27

Как динамически добавить несколько полей, чтобы все эти значения сохранялись в массиве в реактивной форме с использованием Angular 6?

0 голосов
/ 28 июня 2018

Я хочу добавить несколько полей одним нажатием кнопки «Добавить ответ», и все эти значения должны быть сохранены в массиве. Таким образом, каждый раз при нажатии на эту кнопку 5 полей ввода должны быть сгенерированы, и эти значения должны быть сохранены в массиве как информация об одном элементе. Я попытался использовать formBuilder, но он не работал, а затем попробовал подход группы форм, но не смог реализовать его. Я думаю, что это можно сделать с помощью группового подхода. Content.component.ts: 

export class ContentComponent implements OnInit {
questionForm: FormGroup;
aa = false;
ccc = true;
flag = 0;
constructor() { }

ngOnInit() {

this.questionForm = new FormGroup({
  'course': new FormControl(null, Validators.required),
  'topic': new FormControl(null),
  'videos': new FormControl(null),
  'quest': new FormControl(null, Validators.required),
  'typee': new FormControl(null, Validators.required),
//   name: new FormControl(),
// sName: new FormControl(),
  'answerOptions': new FormArray([]),
    'answerOptions2': new FormArray([]),
    'answerOptions3': new FormArray([]),
    'answerOptions4': new FormArray([]),
    'answerOptions5': new FormArray([]),
    'answerOptionsC': new FormArray([]),
    'answerOptionsC2': new FormArray([]),
    'answerOptionsC3': new FormArray([]),
    'answerOptionsC4': new FormArray([]),
    'answerOptionsC5': new FormArray([]),
  'answerOptionsI': new FormArray([]),
});
this.questionForm.setValue({
  'course': 'c1',
  'topic': 't2',
  'videos': 'v3',
  'quest': '',
  'typee': '',
  'answerOptions': [],
  'answerOptions2': [],
  'answerOptions3': [],
  'answerOptions4': [],
  'answerOptions5': [],
  'answerOptionsC': [],
  'answerOptionsC2': [],
  'answerOptionsC3': [],
  'answerOptionsC4': [],
  'answerOptionsC5': [],
  'answerOptionsI': []
});}
onAddAns() {

if (this.flag === 1) {
  const controlI = new FormControl(null, Validators.required);
  (<FormArray>this.questionForm.get('answerOptionsI')).push(controlI);
} else if (this.flag === 2) {
  // (<FormArray>this.questionForm.get('answerOptions')).push(
  //   new FormGroup({
  //     'name': new FormControl(null),
  //     'sName': new FormControl(null)
  //   })
  // );
} else if (this.flag === 3) {
  const controlC = new FormControl(null, Validators.required);
  (<FormArray>this.questionForm.get('answerOptionsC')).push(controlC);
  (<FormArray>this.questionForm.get('answerOptionsC2')).push(controlC);
  (<FormArray>this.questionForm.get('answerOptionsC3')).push(controlC);
  (<FormArray>this.questionForm.get('answerOptionsC4')).push(controlC);
  (<FormArray>this.questionForm.get('answerOptionsC5')).push(controlC);
}}
dropChanged(val: any) {

this.questionForm.get('typee').disable();
console.log(val);
this.ccc = false;
if (val === 'text') {
  this.flag = 1;
  } else if (val === 'radio') {
  this.flag = 2;
  } else if (val === 'check') {
  this.flag = 3;
  }  }
onSubmit() {

console.log(this.questionForm);}}

Content.component.html: 

<div class="container">
  <div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
  <form [formGroup]="questionForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="type1">Select Course:</label>
      <select
        id="type1"
        formControlName="course"
        class="form-control">
        <option value="c1">Data Handling</option>
        <option value="c2">Data Processing</option>
        <option value="c3">Data Manipulation</option>
      </select>
    </div>
    <div class="form-group">
      <label for="type2">Select Topic:</label>
      <select
        id="type2"
        formControlName="topic"
        class="form-control">
        <option value="t1">Topic 1</option>
        <option value="t2">Topic 2</option>
        <option value="t3">Topic 3</option>
      </select>
    </div>
    <div class="form-group">
      <label for="type2">Select Video:</label>
      <select
        id="type2"
        formControlName="videos"
        class="form-control">
        <option value="v1">Video 1</option>
        <option value="v2">Video 2</option>
        <option value="v3">Video 3</option>
      </select>
    </div>
    <div class="form-group">
      <label for= "questio">Question:
      </label>
      <input
        type="text"
        id= "questio"
        formControlName="quest"
        class="form-control">
      <span
        *ngIf="!questionForm.get('quest').valid && questionForm.get('quest').touched"
        class="help-block">
        <span *ngIf="questionForm.get('quest').errors['required']">This field is required!</span>
        </span>
    </div>
    <div class="form-group">
      <label for="type">Type of question</label>
      <select
        [disabled]="aa"
        id="type"
        formControlName="typee"
        (change)="dropChanged($event.target.value)"
        class="form-control">
        <option value="text">Input type</option>
        <option value="radio">Radio Button</option>
        <option value="check">Checkbox</option>
      </select>
    </div>
      <h4>Answers</h4>
      <button
        class="btn btn-default"
        type="button"
        (click)="onAddAns()">Add Answers</button>
        <div class="form-group" id="ip1">
           <!--*ngFor="let answerOptionControl of questionForm.get('answerOptions').controls; let i = index"-->
        <!--formGroupName="i">-->
        <!--Solution:<input type="text" class="form-control" [formControlName]='name'>-->
        <!--Hint:<input type="text" class="form-control" [formControlName]="sName">-->
        <hr>
      </div>
      <div class="form-group" id="ip2"
           *ngFor="let answerOptionControlC of questionForm.get('answerOptionsC').controls; let a = index
                   let answerOptionControlC2 of questionForm.get('answerOptionsC2').controls; let b = index
                   let answerOptionControlC3 of questionForm.get('answerOptionsC3').controls; let c = index
                   let answerOptionControlC4 of questionForm.get('answerOptionsC4').controls; let d = index
                   let answerOptionControlC5 of questionForm.get('answerOptionsC4').controls; let e = index">
        Solution:<input type="text" class="form-control" [formControlName]="a">
        Hint:<input type="text" class="form-control" [formControlName]="b">
        Status:<input type="text" class="form-control" [formControlName]="c">
        link:<input type="text" class="form-control" [formControlName]="d">
        Message:<input type="text" class="form-control" [formControlName]="e">
        <hr>
      </div>
    <div class="form-group" id="ip3"
         *ngFor="let answerOptionControlI of questionForm.get('answerOptionsI').controls; let f = index">
      Keyword:<input type="text" class="form-control" formControlName="f">
      <hr>
    </div>
    <hr>
    <button class="btn btn-primary" type="submit" [disabled]="ccc" (click)="onSubmit()">Submit</button>
  </form>
</div>

Итак, сейчас только для флажка опции приложение работает, но есть некоторая ошибка элементов управления. Я знаю, что этот подход неправильный, поэтому я хочу сделать это с помощью form-group. Это результат этого кода и ошибки вместе с ним.

enter image description here

1 Ответ

0 голосов
/ 02 октября 2018

Ваша проблема в том, что вы забыли [] вокруг formControlName в следующем коде (я добавил его ниже): 

<div class="form-group" id="ip3"
     *ngFor="let answerOptionControlI of questionForm.get('answerOptionsI').controls; let f = index">
  Keyword:<input type="text" class="form-control" [formControlName]="f">
  <hr>
</div>

Поэтому вместо поиска элемента управления по индексу f он ищет элемент управления с именем 'f', которого не существует.

...