it-swarm.dev

angular 반응 형식의 기존 배열로 양식 배열 초기화)

서버에서 가져온 부서 목록의 동적 배열이 있습니다. 초기화시 배열을 구성하기 위해 해당 배열을 푸시하고 싶습니다. 기본적으로 부서 이름이나 ID를 기반으로 확인란을 표시하고 싶습니다. 반응 형으로 빈 배열을 푸시하는 방법을 알고 있지만 기존 배열로 초기화하는 방법을 알고 있습니다.

 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

        });
    }

템플릿

 <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?

1) 모든 부서 확인란의 목록을 채우거나 초기화하는 방법과 내 'SelectedDeptList'배열에 존재하거나 존재하는 사실이어야합니다 (db에서 가져옴).

미리 감사드립니다, 어떤 제안을 부탁드립니다.

5
naila naseem

이것을 시도하고, 선택된 요소와 선택되지 않은 요소를 포함하는 객체 배열을 준비하십시오.

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

this.yourArray.forEach(department => {
  departmentControl.Push(this.fb.group({name: department.name}))
})
12
Fateh Mohamed

이 시도..

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

그런 다음 서버에서 응답을 받으면

Data [ 'departmentListdata']의 배열 형태로 데이터를 가정하고 있습니다.

data['departmentListdata'].forEach((department) => { this.departmentList.Push(this.createDepartment(department)) 
});
2
Manish Rauthan