如何在angular2中嵌套表單域中獲取和設置值？

Question

我正在研究angular2應用程序並使用角反應形式。 如何獲取最內層元素的值並設置其值。

form : FormGroup; 

constructor(private formBuilder: FormBuilder) 
{ 
    this.form = formBuilder.group({ 
     'home_cleaning' : [{ 
      cities : FormBuilder.array([]) 
     }] 
    }); 
} 

setValue() 
{ 
    let cities_array = [1,2,3,4]; 
    this.form.controls['home_cleaning']['cities'].setValue(cities_array); 
} 

getValue() 
{ 
    console.log(this.form.controls['home_cleaning']['cities'].value); 
} 

控制檯中出現錯誤：無法讀取未定義的屬性'setValue/value'。

Answer 1

試試這個：

setValue() { 
    let cities_array = [1, 2, 3, 4]; 
    this.form = this.formBuilder.group({ 
     home_cleaning: this.formBuilder.array([ 
      [({ 
       cities: cities_array, 

      })], 
     ]), 
    }); 
} 

Answer 2

如果你想用數據填充表單，你必須修補它

this.form.patchValue(dataObject); 

或

this.form.patchValue({ 
    'home_cleaning': { cities: 'value' } 
}); 

隨着patchValue ，您可以通過爲感興趣的控件提供鍵/值對的對象，將值分配給FormGroup中的特定控件。

可以合併對象

this.form.patchValue(Object.assign(this.form.value, youNewDataObject))); 

或

this.form.patchValue(dataObj, {selfOnly: true }); 

Answer 3

通過評論似乎你想只推新值到窗體陣列，那麼就讓我們用map是什麼，以及推新形式控件：

setValue() { 
    let cities_array = [1,2,3,4]; 
    let arr = this.form.get('home_cleaning.cities').controls; 
    cities_array.map(city => arr.push(new FormControl(city))) 
} 

PS。

PS。在這裏，我假設你有錯字，home_cleaning實際上是一個嵌套的表格組。

而對於所獲得的價值，只是做：

this.form.get('home_cleaning.cities').value 

Answer 4

試試這個答案

form: FormGroup; 

constructor(private formBuilder: FormBuilder) { 
    this.form = formBuilder.group({ 
     'home_cleaning': formBuilder.group({ 
     cities: [] //if you want to set values as normal array if you want to create FormArray use new FormArray([]) and push formCotrols in this array. 
     }) 
    }); 
} 

setValue() { 
    let cities_array = [1, 2, 3, 4]; 
    this.form.get(['home_cleaning','cities']).setValue(cities_array); 
} 

getValue() { 
    console.log(this.form.get(['home_cleaning','cities']).value); 
}