angular 2从formarray中删除所有项目 [英] angular 2 remove all items from a formarray

问题描述

我在formbuilder中有一个表单数组，并且我正在动态地更改表单，即在来自应用程序1等的点击加载数据上.

I have a form array inside a formbuilder and i am dynamically changing forms, i.e. on click load data from application 1 etc.

我遇到的问题是，所有数据都已加载，但formarray中的数据仍然保留，只是将旧项与new合并.

The issue i am having is that all the data loads in but the data in the formarray stays and just concats the old items with new.

如何清除该formarray仅包含新项.

How do I clear that formarray to only have the new items.

我已经尝试过

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

ngonitit is not being called on click

推荐答案

我遇到了同样的问题.有两种方法可以解决此问题.

I had same problem. There are two ways to solve this issue.

您可以通过循环调用removeAt(i)函数来手动清除每个FormArray元素.

You can manually clear each FormArray element by calling the removeAt(i) function in a loop.

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

此方法的优点在于，您在formArray上的所有订阅(例如在formArray.valueChanges中注册的订阅)都不会丢失.

The advantage to this approach is that any subscriptions on your formArray, such as that registered with formArray.valueChanges, will not be lost.

有关更多信息，请参见 FormArray文档信息.

See the FormArray documentation for more information.

您可以用新的FormArray替换整个FormArray.

You can replace whole FormArray with a new one.

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

如果您订阅了formArray.valueChanges可观察的方法，则此方法会导致问题！如果将FromArray替换为新数组，则将丢失对已订阅的可观察对象的引用.

This approach causes an issue if you're subscribed to the formArray.valueChanges observable! If you replace the FromArray with a new array, you will lose the reference to the observable that you're subscribed to.

这篇关于angular 2从formarray中删除所有项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！