При нажатии кнопки редактирования в таблице, как связать это конкретное значение с formArray в angular8

Question

У меня есть таблица, значения, связанные в этой таблице, взяты из формата, поэтому при нажатии кнопки редактирования я хочу отобразить эти конкретные вещи в полях и на основе редактирования хотите передать те же значения. Но теперь, если я нажму на правку, откроются 2 раздела, и значения в них не являются обязательными.

HTML:

 <table class="table table-hover accordion-table" *ngIf="groupCode && agentCode">
        <thead>
            <tr>
              <th></th>
              <th scope="col" *ngFor="let field of w9ListDetails"> {{field.displayName}} 
              </th>
              <th scope="col" class="width75">Actions</th> 
          </tr>
        </thead> 
        <tbody>
          <tr  *ngFor="let w9 of this.agentDetailsList?.w9">
            <td><a class="accordion-toggle collapsed" data-toggle="collapse" href="#rowW91" aria-expanded="false"><i class="fas fa-plus-circle"></i></a></td>
              <td *ngFor="let field of w9ListDetails">
                  {{w9[field.param]}}
              </td>
              <td class="width75">
                  <button type="button" class="btn btn-outline-primary btn-table" title="View" (click)="editw9(w9, 1)"><i class="fas fa-eye"></i></button>
                  <button type="button" class="btn btn-outline-primary btn-table ml-1" title="Edit" (click)="editw9(w9, 2)"><i class="fas fa-edit"></i></button>
                  </td>
          </tr>
          <tr >
            <td colspan="6" class="hidden-row">
              <div class="accordion-wrapper pt-3 px-3 collapse" id="rowEO1" style="" formArrayName="w9Info" *ngFor="let item of agentW9InfoForm.controls.w9Info?.controls; let i = index;">
              <div class="row" [formGroupName]="i">
                <div class="col-6">
                  <div class="form-group">
                    <label for="">Tax ID Number <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" placeholder="Tax ID Number" name="taxIdNumber"
                      formControlName="taxIdNumber" maxlength="50" autocomplete="new-tx" [ngClass]="{ 'is-invalid': submitted && item.controls.taxIdNumber.errors }" allowNumberOnly>
                      <div *ngIf="submitted && item.controls.taxIdNumber.errors" class="invalid-feedback">
                        <div *ngIf="item.hasError('required', 'taxIdNumber')">Tax Id is required</div>
                    </div>
                  </div>
                </div>
                <div class="col-6">
                  <div class="form-group">
                    <label for="">Signature Date <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" placeholder="MM/DD/YYYY" name="signatureDate"
                      formControlName="signatureDate" [ngClass]="{ 'is-invalid': submitted && item.controls.signatureDate.errors }">
                      <div *ngIf="submitted && item.controls.signatureDate.errors" class="invalid-feedback">
                        <div *ngIf="item.controls.signatureDate.errors.required">Signature Date is required</div>
                    </div>
                  </div>
                </div>
                <div class="col-6">
                  <div class="form-group">
                    <label for="">Business Type <span class="text-danger">*</span></label>
                    <select class="custom-select" name="businessType" formControlName="businessType" [ngClass]="{ 'is-invalid': submitted && item.controls.businessType.errors }">
                      <option value=''>Select Business Type </option>
                      <option *ngFor="let businessType of detailsSelectDropDown?.W9BusinessType" [value]='businessType.id'>
                        {{businessType.value}}</option>
                    </select>
                    <div *ngIf="submitted && item.controls.businessType.errors" class="invalid-feedback">
                      <div *ngIf="item.controls.businessType.errors.required">Business Type is required</div>
                  </div>
                  </div>
                </div>
              </div>
              </div>
            </td>
            </tr>
      </tbody>
      </table>

Ts:

  editw9(w9,mode) {
   console.log(w9);
  this.agentDetailsList.w9.forEach(
          w9Info => {
            const control = <FormArray>this.agentW9InfoForm.get('w9Info')['controls'];
            control.push(this.editW9Information());
          })
          // this.agentW9InfoForm.get('w9Info')['controls'].patchValue({
          //   taxIdNumber: [w9.taxId, Validators.required],
          //   signatureDate: [w9.signatureDate, Validators.required],
          //   businessType: [w9.businessType, Validators.required],
          //   uploadFile: ['']
          // })
          this.preventW9DetailsEmpty()
  }
  // w9 section

  public addW9Details() {
    this.w9InfoDetails.push(this.createW9Information());
  }

  public deleteW9Details(i) {
    this.w9InfoDetails.removeAt(i);
  }

  public preventW9DetailsEmpty() {
    if (!this.w9InfoDetails.length) {
      let group = this.createW9Information();
      group.reset();
      this.agentW9InfoForm.setControl('w9Info', this.FB.array([group]));
    }
  }

  public get w9InfoDetails(): FormArray {
    return <FormArray>this.agentW9InfoForm.controls['w9Info'];
  }

  private createW9Information() {
    return this.FB.group({
      taxIdNumber: [null, Validators.required],
      signatureDate: [null, Validators.required],
      businessType: [null, Validators.required],
      uploadFile: ['']
    });
  }

  private editW9Information() {
    return this.FB.group({
        taxIdNumber: ["", Validators.required],
        signatureDate: ["", Validators.required],
        businessType: ["", Validators.required],
        uploadFile: ['']
      })

  }

Демо