Angular - FormArray, как сбросить определенное поле formArray? - PullRequest
Новая
       15

Angular - FormArray, как сбросить определенное поле formArray?

0 голосов
/ 05 декабря 2018

Я не могу понять, как сбросить одно поле FormArray, например: 

myForm = this.fb.group(
        {
            title: ["", [Validators.required, Validators.minLength(4)]],
            date: ["", Validators.required],
            pairs: this.fb.array(
                this.fPairs.map(f =>
                    this.fb.group({
                        score: [],
                        value: [],
                        valueRel: []
                    })
                )
            )
        },
        {
            validator: minMaxValidator
        }
    );

, поэтому мой FormArray представляет собой массив из 4 объектов, поскольку он сопоставлен с: 

fPairs: Array<fPairs> = [
        {score: 0, value: 0, valueRel: 0},
        {score: 0, value: 0, valueRel: 0},
        {score: 0, value: 0, valueRel: 0},
        {score: 0, value: 0, valueRel: 0}
    ];

То, что я до сих пор достиг, чтобы сбросить эту часть моей формы, это: 

pairsControl= this.myForm.controls["pairs"] as FormArray;

и затем использовать:

this.pairsControl.reset ();

но это сбрасывает КАЖДОЕ поле FormArray, и вместо этого я могу сбросить только определенное поле,

, например, поле "score" всех 4 объектов, оставив при этом нетронутымиполя value и valueRel

Я пробовал это: 

this.fixedPointsControl.reset(["score"]);

но то, что он делает, сбрасывает все как в предыдущем выражении, так что ничего не меняется!

Что справильный способ сброса определенного поля formArray?

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Просто создайте pairs геттер, чтобы получить pairs FormArray.Теперь в методе resetField установите параметр с именем fieldName, который будет ожидать имя файла от pairs FormArray до reset

Примерно так: 

get pairs() {
  return (<FormArray>this.myForm.get('pairs'));
}

resetField(fieldName) {
  this.pairs.controls.forEach(group => group.get(fieldName).reset());
}

А затем добавьте эти кнопки в свой шаблон: 

<button (click)="resetField('score')">Reset Score</button> | 
<button (click)="resetField('value')">Reset Value</button> | 
<button (click)="resetField('valueRel')">Reset Value Rel</button>

Вот Рабочий образец StackBlitz для вашей ссылки.

0 голосов
/ 05 декабря 2018

Если у вас есть 4 поля внутри FormArray, вы можете сбросить его через его индекс, поскольку внутри FormArray есть массив массива FormGroup, поэтому вы можете получить к нему доступ по его индексу.

Создал Stackblitz Demo для вашей справки 

const pairs = this.myForm.get['pairs'] as FormArray;   // Use 'get' instead of 'controls'

// Iterates the Pairs' FormArray controls and use patchValue if you want to reset or assign a new value to a particular property
pairs.controls.forEach(pair => pair.patchValue({ score: '' }));
...