angular 2 удалить все элементы из массива

У меня есть массив форм внутри formbuilder, и я динамически меняю формы, то есть при загрузке данных из приложения 1 и т. Д.

Проблема, с которой я сталкиваюсь, заключается в том, что все данные загружаются, но данные в массиве форм остаются и просто объединяют старые элементы с новыми.

Как мне очистить этот formarray, чтобы в нем были только новые элементы.

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

const control2 = <FormArray>this.registerForm.controls['other_Partners'];
        control2.setValue([]);

но это не работает.

Любые идеи? Благодарность

в nginit

ngOnInit(): void {
this.route.params.subscribe(params => { alert(params['id']);
            if (params['id']) {
                this.id = Number.parseInt(params['id']);
            }
            else { this.id = null;}
          });
if (this.id != null && this.id != NaN) {
            alert(this.id);
            this.editApplication();
            this.getApplication(this.id);
        }
        else
        {
            this.newApplication();
        }

}

onSelect(Editedapplication: Application) {
 this.router.navigate(['/apply', Editedapplication.id]);
}

editApplication() {
      
        this.registerForm = this.formBuilder.group({
              id: null,
            type_of_proposal: ['', Validators.required],
            title: ['', [Validators.required, Validators.minLength(5)]],
            lead_teaching_fellow: ['', [Validators.required, Validators.minLength(5)]],
            description: ['', [Validators.required, Validators.minLength(5)]],
            status: '',
            userID: JSON.parse(localStorage.getItem('currentUser')).username,
            contactEmail: JSON.parse(localStorage.getItem('currentUser')).email,
            forename: JSON.parse(localStorage.getItem('currentUser')).firstname,
            surname: JSON.parse(localStorage.getItem('currentUser')).surname,
            line_manager_discussion: true,
            document_url: '',
            keywords: ['', [Validators.required, Validators.minLength(5)]],
            financial_Details: this.formBuilder.group({
                  id: null,
                buying_expertise_description: ['', [Validators.required, Validators.minLength(2)]],
                buying_expertise_cost: ['', [Validators.required]],
                buying_out_teaching_fellow_cost: ['', [Validators.required]],
                buying_out_teaching_fellow_desc: ['', [Validators.required, Validators.minLength(2)]],
                travel_desc: ['', [Validators.required, Validators.minLength(2)]],
                travel_cost: ['', [Validators.required]],
                conference_details_desc: ['', [Validators.required, Validators.minLength(2)]],
                conference_details_cost: ['', [Validators.required]],
            }),

            partners: this.formBuilder.array
                (
                [
                    //this.initEditPartner(),
                    //this.initEditPartner()
                    // this.initMultiplePartners(1)
                ]
                ),
            other_Partners: this.formBuilder.array([
                //this.initEditOther_Partners(),
            ])
           
        });
       
    }

getApplication(id)
    {
        

        this.applicationService.getAppById(id, JSON.parse(localStorage.getItem('currentUser')).username)
            .subscribe(Response => {
               
                    if (Response.json() == false) {
                        this.router.navigateByUrl('/');
                    }
                    else {
                        this.application = Response.json();  
                          for (var i = 0; i < this.application.partners.length;i++)
                          {
                                this.addPartner();
                          }
                          for (var i = 0; i < this.application.other_Partners.length; i++) {
                              this.addOther_Partner();
                          }

                          this.getDisabledStatus(Response.json().status);
                        (<FormGroup>this.registerForm)
                            .setValue(Response.json(), { onlySelf: true }); 
                      }

                }
         
        );

       
        
        

       
    }

ngonitit не вызывается при нажатии

У меня была такая же проблема. Есть два способа решить эту проблему.

Сохранить подписку

Вы можете вручную очистить каждый элемент FormArray, вызвав removeAt(i)функцию в цикле.

clearFormArray = (formArray: FormArray) => {
  while (formArray.length !== 0) {
    formArray.removeAt(0)
  }
}

Преимущество этого подхода заключается в том, что любые подписки на вашем сайте formArray, например, зарегистрированные formArray.valueChanges, не будут потеряны.

Дополнительную информацию см. В документации FormArray .

Более чистый метод (но ломает ссылки на подписку)

Вы можете заменить весь FormArray на новый.

clearFormArray = (formArray: FormArray) => {
  formArray = this.formBuilder.array([]);
}

Этот подход вызывает проблему, если вы подписаны на formArray.valueChangesнаблюдаемое! Если вы замените FromArray новым массивом, вы потеряете ссылку на наблюдаемый объект, на который вы подписаны.

Или вы можете просто очистить элементы управления

this.myForm= {
     name: new FormControl(""),
     desc: new FormControl(""),
     arr: new FormArray([])
}

Добавить что - нибудь array

const arr = <FormArray>this.myForm.controls.arr;
arr.push(new FormControl("X"));

Очистить массив

const arr = <FormArray>this.myForm.controls.arr;
arr.controls = [];

Когда у вас выбрано и очищено несколько вариантов, иногда вид не обновляется. Обходной путь - добавить

arr.removeAt(0)

ОБНОВИТЬ

Более элегантное решение для использования массивов форм - это использование геттера в верхней части вашего класса, после чего вы можете получить к нему доступ.

get inFormArray(): FormArray {
    this.myForm.get('inFormArray') as FormArray;
}

И использовать его в шаблоне

<div *ngFor="let c of inFormArray; let i = index;" [formGroup]="i">
other tags...
</div>

Сброс настроек:

inFormArray.reset();

От себя:

inFormArray.push(new FormGroup({}));

Удалить значение по индексу: 1

inFormArray.removeAt(1);

ОБНОВЛЕНИЕ 2:

Получите частичный объект, получите все ошибки как JSON и многие другие функции, используйте NaoFormsModule

Начиная с Angular 8+ вы можете использовать clear()для удаления всех элементов управления в FormArray:

const arr = new FormArray([
   new FormControl(),
   new FormControl()
]);
console.log(arr.length);  // 2

arr.clear();
console.log(arr.length);  // 0

Для предыдущих версий рекомендуемый способ:

while (arr.length) {
   arr.removeAt(0);
}

https://angular.io/api/forms/FormArray#clear

Угловой 8

просто используйте clear()метод formArrays:

(this.invoiceForm.controls['other_Partners'] as FormArray).clear();

Angular v4.4, если вам нужно сохранить ту же ссылку на экземпляр FormArray, попробуйте следующее:

purgeForm(form: FormArray) {
  while (0 !== form.length) {
    form.removeAt(0);
  }
}

Предупреждение!

В документации Angular v6.1.7 FormArray говорится:

Чтобы изменить элементы управления в массиве, используйте методы push, insert или removeAt в самом FormArray. Эти методы обеспечивают правильное отслеживание элементов управления в иерархии формы. Не изменяйте массив AbstractControls, используемый для непосредственного создания экземпляра FormArray, так как это приведет к странному и неожиданному поведению, например обнаружению неисправных изменений.

Имейте это в виду, если вы используете spliceфункцию непосредственно в controlsмассиве в качестве одного из предложенных ответов.

Используйте removeAtфункцию.

  while (formArray.length !== 0) {
    formArray.removeAt(0)
  }

Вы можете легко определить геттер для своего массива и очистить его следующим образом:

  formGroup: FormGroup    
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.formGroup = this.fb.group({
      sliders: this.fb.array([])
    })
  }
  get sliderForms() {
    return this.formGroup.get('sliders') as FormArray
  }

  clearAll() {
    this.formGroup.reset()
    this.sliderForms.clear()
  }

Обновление: в Angular 8 наконец-то появился метод очистки массива FormArray.clear ()

Начиная с Angular 8 вы можете использовать this.formArray.clear()для очистки всех значений в массиве форм. Это более простая и эффективная альтернатива удалению всех элементов по одному.

Используйте FormArray.clear (), чтобы удалить все элементы массива в FormArray

При условии, что структура данных для того, что вы будете заменять информацию в массиве, соответствует тому, что уже есть, вы можете использовать patchValue

https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html#!#reset-anchor

patchValue (value: any [], {onlySelf, emitEvent} ?: {onlySelf ?: boolean, emitEvent ?: boolean}): void Исправляет значение FormArray. Он принимает массив, соответствующий структуре элемента управления, и сделает все возможное, чтобы сопоставить значения с правильными элементами управления в группе.

Он принимает как надмножества, так и подмножества массива без выдачи ошибки.

const arr = new FormArray([
   new FormControl(),
   new FormControl()
]);
console.log(arr.value);   // [null, null]
arr.patchValue(['Nancy']);
console.log(arr.value);   // ['Nancy', null]

В качестве альтернативы вы можете использовать reset

reset (value ?: any, {onlySelf, emitEvent} ?: {onlySelf ?: boolean, emitEvent ?: boolean}): void Сбрасывает FormArray. По умолчанию это означает:

Массив и все потомки помечены как нетронутые Массив и все потомки помечены как нетронутые. Значение всех потомков будет нулевым или пустым. Вы также можете выполнить сброс до определенного состояния формы, передав массив состояний, который соответствует структуре элемента управления. . Состояние может быть отдельным значением или объектом состояния формы со значением и отключенным статусом.

this.arr.reset(['name', 'last name']);
console.log(this.arr.value);  // ['name', 'last name']

ИЛИ

this.arr.reset([   {value: 'name', disabled: true},   'last' ]);
console.log(this.arr.value);  // ['name', 'last name']
console.log(this.arr.get(0).status);  // 'DISABLED'

Вот разветвленная демонстрация Plunker из некоторых моих предыдущих работ, демонстрирующая очень простое использование каждого из них.

Я никогда не пробовал использовать formArray, я всегда работал с FormGroup, и вы можете удалить все элементы управления, используя:

Object.keys(this.formGroup.controls).forEach(key => {
          this.formGroup.removeControl(key);
        });

будучи formGroup экземпляром FormGroup.

Я очень опоздал, но нашел другой способ, где петли не нужны. вы можете сбросить массив, установив элемент управления массивом на пустой.

Код ниже сбросит ваш массив.

this.form.setControl('name', this.fb.array([]))

Циклу while потребуется много времени для удаления всех элементов, если в массиве есть 100 элементов. Вы можете очистить свойства элементов управления и значений FormArray, как показано ниже.

clearFormArray = (formArray: FormArray) => {formArray.controls = []; formArray.setValue ([]); }

Чтобы код оставался чистым, я создал следующий метод расширения для всех, кто использует Angular 7 и ниже. Это также можно использовать для расширения любых других функций реактивных форм.

import { FormArray } from '@angular/forms';

declare module '@angular/forms/src/model' {
  interface FormArray {
    clearArray: () => FormArray;
  }
}

FormArray.prototype.clearArray = function () {
  const _self = this as FormArray;
  _self.controls = [];
  _self.setValue([]);
  _self.updateValueAndValidity();
  return _self;
}