угловые 2 удаляют все объекты из formarray
У меня есть массив формы в конструкторе форм, и я динамично изменяю формы, т.е. по щелчку загружаю данные из приложения 1 и т.д.
Проблема, которую я имею, - то, что все загрузки данных в, но данные в formarray остаются и просто concats старые объекты с новым.
Как я очищаю это 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 не называют по щелчку
6 ответов
С Угловых 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);
}
Обновление: Угловые 8 наконец заставили метод очищать Массив FormArray.clear ()
Угловой 8
просто использование clear() метод на formArrays:
(this.invoiceForm.controls['other_Partners']).clear();
Цикл с условием продолжения займет много времени для удаления всех объектов, если массив будет иметь 100's объектов. Можно освободить оба средств управления и оценить свойства FormArray как ниже.
clearFormArray = (formArray: FormArray) => {formArray.controls = []; formArray.setValue ([]);}
в lastest версии можно использовать FormArray.reset ()
Для содержания кода в чистоте, я создал следующий дополнительный метод для любого использующего Угловые 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;
}