Checkbox value from FormArray group is not updating

Question

I am having trouble with getting the updated value of a checkbox in an Angular 2 reactive form. I have a list of objects of displayed in a table, and when the user clicks edit on a row the editAccountProject function is called and should populate the modal form with the objects properties:

In Component I have:

export class AccountProjectComponent implements OnInit {
    @ViewChild('modal') modal: ModalComponent;
    accountProjects: IAccountProject[];    
    accountProject: IAccountProject;
    accountprjFrm: FormGroup;  

    constructor(private fb: FormBuilder){}
editAccountProject(id: number) {        
        this.accountProject = this.accountProjects.filter(x => x.AccountId === id)[0];
        this.createForm();
        this.accountprjFrm.patchValue({
            AccountId: this.accountProject.AccountId,
            AccountCode: this.accountProject.AccountCode
        }); 
        this.modal.open();
    }
    createForm() {
        this.accountprjFrm.patchValue({
            AccountId: this.accountProject.AccountId,
            AccountCode: this.accountProject.AccountCode
        });
        const arrayControl = <FormArray>this.accountprjFrm.controls['AccountProjectLinks'];
        this.accountProject.AccountProjectLinks.forEach(item => {
            let newGroup = this.fb.group({
                AccountProjectId: [item.AccountProjectId],
                ProjectId: [item.ProjectId],
                ProjectName: [item.ProjectName],
                IsActive: [item.IsActive]

            });
            arrayControl.push(newGroup);
        });
    }

onSubmit(formData: any) {
this._accountprojectService.put(Global.BASE_ACCOUNTPROJECT_ENDPOINT, this.accountProject.AccountId, this.accountProject);
}

The modal part of the html template where the editing form is loaded:

<modal #modal>
<form novalidate (ngSubmit)="onSubmit(accountprjFrm)" [formGroup]="accountprjFrm">
    <modal-header [show-close]="true">
        <h4 class="modal-title">{{modalTitle}}</h4>
    </modal-header>
    <modal-body>
        <div class="form-group">
            <div>
                <span>AccountId*</span>
                <input readonly="readonly" type="text" class="form-control" placeholder="AccountId" formControlName="AccountId">
            </div>
            <div>
                <span>Account Code*</span>
                <input readonly="readonly" type="text" class="form-control" placeholder="AccountCode" formControlName="AccountCode">
            </div>
            <div formArrayName="AccountProjectLinks">
                <div class="form-group" [formGroupName]="i"  *ngFor="let AccountProjectLink of AccountProjectLinks.controls; let i=index">
                    <input type="text" style="float: left; width: 200px" readonly="readonly" class="form-control" formControlName="ProjectName" placeholder="ProjectName" />

                    <input type="checkbox" style="width: 50px" class="form-control"  
                           formControlName="IsActive" placeholder="IsActive" /> 
                    <input type="hidden" style="width: 50px" class="form-control" formControlName="AccountProjectId" placeholder="AccountProjectId"/>
                    <input type="hidden" class="form-control" formControlName="ProjectId" placeholder="ProjectId" style="clear: both"/>
                </div>
            </div>
        </div>
    </modal-body>
    <modal-footer>
        <div>
            <a class="btn btn-default" (click)="modal.dismiss()">Cancel</a>
            <button type="submit"  class="btn btn-primary">Update</button>
        </div>
    </modal-footer>
</form>

The Model(s):

import {IAccountProjectLink} from "./account-project-link"
export interface IAccountProject {
    AccountId: number,
    AccountCode: string;
    AccountProjectLinks: IAccountProjectLink[];

}

export interface IAccountProjectLink {
    AccountProjectId: number;
    ProjectId: number;
    ProjectName: string;
    IsActive: boolean;

}

When i check/uncheck the IsActive checkboxes I would like the IsActive fields to be updated accordingly, but I am missing something.

Can someone tell me what I must do in order to have my IsActive values updated?

Answer 1

You need to initialize your group form on component initialization, in your case it doesn't appear to be initialized at all.

It's hard to get all your resources for this problem, so I tried to simulate with less components, but this should help you get going.

I'm not sure how your Modal or AccountProjectLinks work, but I can say you need at the minimum something like this

  ngOnInit() {

    let AccountProjectLinks = new FormArray([]);

    AccountProjectLinks.push(
      new FormGroup({
        'ProjectName': new FormControl(''),
        'IsActive': new FormControl(true),
        'AccountProjectId': new FormControl(''),
        'ProjectId': new FormControl('')
      })
    );

    this.accountprjFrm = new FormGroup({
      'AccountId': new FormControl(''),
      'AccountCode': new FormControl(''),
      'AccountProjectLinks': AccountProjectLinks
    });
  };

Your html part seems almost complete, i would iterate through the main form in your ngFor loop, and get the array member

 <form novalidate (ngSubmit)="onSubmit(accountprjFrm)" [formGroup]="accountprjFrm">
      <div class="form-group">
        <div>
          <span>AccountId*</span>
          <input readonly="readonly" type="text" class="form-control" placeholder="AccountId" formControlName="AccountId">
        </div>
        <div>
          <span>Account Code*</span>
          <input readonly="readonly" type="text" class="form-control" placeholder="AccountCode" formControlName="AccountCode">
        </div>
        <div formArrayName="AccountProjectLinks">
          <div class="form-group"  *ngFor="let AccountProjectLink of accountprjFrm.get('AccountProjectLinks').controls; let i=index">
            <div [formGroupName]="i" >
            <input type="text" readonly="readonly" class="form-control" formControlName="ProjectName" placeholder="ProjectName" />

            <input type="checkbox"  class="form-control"
                   formControlName="IsActive" placeholder="IsActive" />
            <input type="hidden"  class="form-control" formControlName="AccountProjectId" placeholder="AccountProjectId"/>
            <input type="hidden" class="form-control" formControlName="ProjectId" placeholder="ProjectId" style="clear: both"/>
          </div>
          </div>
        </div>
      </div>
      <div>
        <a class="btn btn-default" (click)="modal.dismiss()">Cancel</a>
        <button type="submit"  class="btn btn-primary">Update</button>
      </div>
  </form>