Элементы управления формы для массива объектов - PullRequest
Новая
       8

Элементы управления формы для массива объектов

0 голосов
/ 24 мая 2018 
{ 
    id: 123,
    email: "abc@gmail.com",
    password: 108,
    myObj:[
    { id:1, name:"abc", age: 20 },
    { id:2, name:"def", age: 21 },
    { id:3, name:"ghi", age: 22 },
    { id:4, name:"jkl", age: 23 } ] 
}

Вот так я получаю поля с сервера для исправления, я исправляю их так: 

this.myForm = this.fb.group({
    id: [],
    email: [],
    password: [],
    myObj: [] 
});

И мне нужно, чтобы каждый из myObj Array былотдельный контроль формы.Я пытался получить к ним доступ из HTML по-разному (например, formControlName = myObj[0], formControlName = myObj.name), но безуспешно.

Как я могу получить доступ к myObj полям в HTML?

1 Ответ

0 голосов
/ 24 мая 2018

это должно быть примерно так: 

objects: any[] = [];
myObj:[
    { id:1, name:"abc", age: 20 },
    { id:2, name:"def", age: 21 },
    { id:3, name:"ghi", age: 22 },
    { id:4, name:"jkl", age: 23 } ]

ngOnInit() {
    this.myForm = this.fb.group({
        id: [],
        email: [],
        password: [],
        objects: this.formBuilder.array([]) 
    }); 
this.objects = this.myForm.get('objects') as FormArray;
for(let obj of this.myOj){
    this.objects.push(this.createItem());
    }
}

createItem(): FormGroup {
  return this.formBuilder.group({
    id: '',
    name: '',
    age: ''
  });
}

и в шаблоне: 

<div formArrayName="objects"
  *ngFor="let item of myForm.get('objects').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="id">
    <input formControlName="name">
    <input formControlName="age">
  </div>
</div>
...