web-dev-qa-db-ja.com

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）すべてのdeptチェックボックスのリストを作成または初期化するにはどうすればよいですか？「SelectedDeptList」配列（dbからフェッチされた）に存在するか存在するものはtrueでなければなりません.

事前に感謝します、どんな提案でも感謝されます。

angularformsangular2-formsangular-reactive-forms
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

データを事前入力するには、FormGroupインスタンスの2つのメソッドがあります。 setValue()＆patchValue()。サーバーから応答を受け取ったら、これらのメソッドsetValue()とpatchValue()のいずれかを使用して値を設定/パッチするだけで、FormGroupの_form control_の値を設定できます。 setValue()は、FormGroupのすべてのフォームコントロールの値を設定します。 setValue()のフォームコントロールを省略することはできませんが、FormGroupのフォームコントロールをいくつかだけ割り当てたい場合は、patchValue().を使用できます。

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

                });
    }
_

またはpatchValue()を使用します。特定のformControlを更新する場合

_  UpdateForm(){
            this.userForm.patchValue(
                     {

                       'departmentList': this.departmentList

                    });
        }
_
1
Vikas