Initialize Form Array With existing array in angular reactive form

Question

I have an dynamic array of department list fetched from server. I want to push that array to form array on initialization, basically i want to show checkboxes based on department name or id in array. I know how to push an empty array in reactive forms.but how to initialize with an existing array.Actually its an update/edit Component

departmentList:any=[];    //array contains all departments  
SelectedDeptList:any=[];  //fetched from db , selected departments

userForm: FormGroup; 
this.userForm = this.fb.group({  //fb form builder
    'phone': [null],   
    'departmentList': this.fb.array([this.createDepartment()]),
})


createDepartment(): FormGroup {
    return this.fb.group({
        'name': ''//checkbox value true or false
    });
}

Template

<div formArrayName="departmentList" *ngFor="let item of 
userForm.get('departmentList').controls; let i = index;">
    <div class="col-md-6" [formGroupName]="i">
        <div class="form-group">
            <div class="col-md-4">
                <label class="mt-checkbox mt-checkbox-outline">
                    <input formControlName="name" type="checkbox"> Department Name
                    <span></span>
                </label>
            </div>
        </div>
    </div>
</div>

ToDo ?

how can i populate or initialize list of all dept checkboxes and those should be true which are present or exist in my 'SelectedDeptList' array(fetched from db).

thanks in advance , any suggestion will be appreciated.

F.H. · Accepted Answer · 2021-05-13 20:16:22Z

22

try this, prepare an array of object that contain selected and non selected element

let departmentControl = <FormArray>this.userForm.controls.departmentList;

this.yourArray.forEach(department => {
  departmentControl.push(this.fb.group({name: department.name}))
})

edited May 13, 2021 at 20:16

F.H.

1,7541 gold badge27 silver badges38 bronze badges

answered May 27, 2018 at 13:37

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manish Rauthan · Accepted Answer · 2019-03-02 10:36:22Z

3

Try This..

let departmentControl = this.form.get('departmentList') as FormArray).controls;

then when you receive response from server then do

I am assuming data in the form of array in data['departmentListdata']

data['departmentListdata'].forEach((department) => { this.departmentList.push(this.createDepartment(department)) 
});

answered Mar 2, 2019 at 10:36

Manish Rauthan

311 bronze badge

Comments

Vikas · Accepted Answer · 2018-05-27 08:40:11Z

1

To pre-populate data, there are two methods of FormGroup instance. setValue() & patchValue(). After you receive the response from the server just set/patch the values using one of these methods setValue() and patchValue() both sets the value in form control of FormGroup. setValue() sets the value for each and every form control of FormGroup. you cannot omit any form control in setValue() but if you want to assign only few form controls of FormGroup then you can use patchValue().

 UpdateForm(){
        this.userForm.setValue(
                 {
                    'phone' : '112345',//some Value
                   'departmentList': this.this.departmentList

                });
    }

OR use patchValue(). If you want to update a partcular formControl

  UpdateForm(){
            this.userForm.patchValue(
                     {

                       'departmentList': this.departmentList

                    });
        }

edited May 27, 2018 at 8:40

answered May 27, 2018 at 8:20

Vikas

12.1k7 gold badges49 silver badges71 bronze badges

1 Comment

naila naseem Over a year ago

thanks for answer . patch value just patch those checkboxes that were selected and stored in db . but firstly before patch i would have to show all checkboxes then secondly patch value .

Collectives™ on Stack Overflow

Initialize Form Array With existing array in angular reactive form

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related