web-dev-qa-db-fra.com

Initialiser le tableau de formulaires avec le tableau existant dans angular forme réactive

J'ai un tableau dynamique de la liste des départements récupérés du serveur. Je veux pousser ce tableau pour former un tableau lors de l'initialisation, en gros, je veux afficher les cases à cocher en fonction du nom du département ou de l'ID dans le tableau. Je sais comment pousser un tableau vide sous des formes réactives, mais comment initialiser avec un tableau existant.En fait, c'est un composant de mise à jour/édition

 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

        });
    }

modèle

 <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) comment puis-je remplir ou initialiser la liste de toutes les cases à cocher dept et celles-ci doivent être vraies qui sont présentes ou existent dans mon tableau "SelectedDeptList" (récupéré à partir de db).

merci d'avance, toute suggestion sera appréciée.

angularformsangular2-formsangular-reactive-forms
5
naila naseem

essayez ceci, préparez un tableau d'objets qui contiennent l'élément sélectionné et non sélectionné

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

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

Essaye ça..

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

puis lorsque vous recevez une réponse du serveur, faites

J'assume des données sous forme de tableau dans data ['departmentListdata']

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

Pour préremplir les données, il existe deux méthodes d'instance FormGroup. setValue() & patchValue(). Après avoir reçu la réponse du serveur, il vous suffit de définir/corriger les valeurs à l'aide de l'une de ces méthodes setValue() et patchValue() les deux définissent la valeur dans form control De FormGroup. setValue() définit la valeur de chaque contrôle de formulaire de FormGroup. vous ne pouvez omettre aucun contrôle de formulaire dans setValue() mais si vous souhaitez affecter seulement quelques contrôles de formulaire de FormGroup, vous pouvez utiliser patchValue().

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

                });
    }

OU utilisez patchValue(). Si vous souhaitez mettre à jour un formulaire particulier

  UpdateForm(){
            this.userForm.patchValue(
                     {

                       'departmentList': this.departmentList

                    });
        }
1
Vikas