Добавляйте поля динамически с помощью formbuilder - PullRequest
Новая
       16

Добавляйте поля динамически с помощью formbuilder

0 голосов
/ 15 января 2019

enter image description here Я создаю одно приложение для викторины. Количество вариантов ответа будет динамическим. 

 this.quizForm=this.fb.group({
  slNo:[1,[Validators.required]],
  qn:['',Validators.required],
  ans:['',Validators.required],
  pickedAns:[''],
  options:[],    ==>options have id,answertext fields
  total:[0,[Validators.required]],
  correct:[0,[Validators.required]],
  wrong:[0,[Validators.required]],
  left:[0,[Validators.required]],  })

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

1 Ответ

0 голосов
/ 15 января 2019

Я сделал нечто подобное, используя FormArray [].

По моему тс:

// объявляем массив 

answerOptions: FormArray = new FormArray([]);

// init 

createForm() {
        this.quizForm = new FormGroup({
            answerOptions: this.formBuilder.array([])
        });
    }

// Добавить по необходимости 

addAnswerOptionControl(option: AnswerOption): void {
        this.answerOptions = this.quizForm.get('answerOptions') as FormArray;
        this.answerOptions.push(this.createOptionControl(option));
    }


createOptionControl(option: AnswerOption)): FormGroup {
    return this.formBuilder.group({
        option: new FormControl('', Validators...]
        )
    });
}

get formData() {
    return <FormArray>this.quizForm.get('answerOptions');
}

И на мой взгляд: 

<div formArrayName="answerOptions" *ngFor="let option of formData.controls; let i = index">
                <div [formGroupName]="i">
                    <mat-form-field>
                        <input
                            type="text"
                            formControlName="answerOption"
                        />
                    </mat-form-field>
                </div>
            </div>
...