title: Remove all items from a FormArray in Angular
body: <p>I have a form array inside a FormBuilder and I am dynamically changing forms, i.e. on click load data from application 1 etc.</p>
  <p>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.</p>
  <p>How do I clear that FormArray to only have the new items.</p>
  <p>I've tried this</p>
  <pre class="lang-ts prettyprint-override"><code>const control2 = &lt;FormArray&gt;this.registerForm.controls['other_Partners'];
  control2.setValue([]);
  </code></pre>
  <p>but it doesn't work.</p>
  <p>Any ideas?</p>
  <pre class="lang-js prettyprint-override"><code>ngOnInit(): void {
    this.route.params.subscribe(params =&gt; {
      if (params['id']) {
        this.id = Number.parseInt(params['id']);
      } else { this.id = null;}
    });
    if (this.id != null &amp;&amp; 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 =&gt; {
        if (Response.json() == false) {
          this.router.navigateByUrl('/');
        } else {
          this.application = Response.json();
          for (var i = 0; i &lt; this.application.partners.length;i++) {
            this.addPartner();
          }
          for (var i = 0; i &lt; this.application.other_Partners.length; i++) {
            this.addOther_Partner();
          }
  
          this.getDisabledStatus(Response.json().status);
          (&lt;FormGroup&gt;this.registerForm) .setValue(Response.json(), { onlySelf: true });
        }
      });
  }
  </code></pre>
  <p>ngOnInit is not being called on click</p>