Angular2 patchValue JSON-данные для formArray - PullRequest
Новая
       9

Angular2 patchValue JSON-данные для formArray

0 голосов
/ 29 января 2019

У меня есть данные Json, подобные этим:

assets/details.json

{
    "name" : "john",
    "age"  : 20,
   "address" : [{
       "main": "address1",
       "sub": "address2"
     },
      {
      "main": "add1",
      "sub" : "add2"
     }]
}

Я хочу показать все эти данные Json в угловых формах с patchValue.

Я пробовал это.

app.component.ts

export class AppComponent {
  data: FormGroup
  constructor(private FB: FormBuilder, private service: DataService) {}
 ngOnInit() {
   this.data = this.FB.group({
      name: [''],
      age: [''],
      address: this.FB.array([
          this.addAddress()
     ])
   })

  this.getData()

   }
addAddress(): FormGroup {
    return this.FB.group({
      main: [''],
      sub: [''],
    })
  }
}
getData(){
  this.service.getData('../assets/details.json').subscribe( (data) => {
     this.data.patchValue({data})
  }
}

И я создал мою HTML-страницу следующим образом: app.component.html

<form [formGroup]="data" (ngSubmit)="onSubmit()">
    <input formControlName="name" type="text" class="form-control col-sm-8">
    <input formControlName="age" type="number" class="form-control col-sm-8">

    <div formArrayName="address" *ngFor="let d of data.get('address').controls; let i = index;">
        <div [formGroupName]="i">
            <input formControlName="main" type="text" class="form-control">
            <input formControlName="sub" type="text" class="form-control" />
        </div>
    </div>
</form>

Но ничего не работает, как я ожидал.Ничто не может заполнить форму.Я не знаю, как сделать дальше.

Как я могу получить все эти данные JSON в полях формы?

Любая помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 29 января 2019

patchValue только обновляет существующий FormArray, это не изменит структуру вашего FormArray.Вы должны убедиться, что ваш FormArray имеет правильный размер, прежде чем устанавливать его, вы также можете полностью воссоздать его, как показано ниже: 

this.data.patchValue({ name: data.name, age: data.age });

this.data.controls['address'] = this.FB.array(data.map(address => {
    const group = this.addAddress();
    group.patchValue(address);
    return group ;
}));

См. Этот пост для получения более подробной информации .

0 голосов
/ 29 января 2019

Если бы в вашей форме не было FormArray, вы могли бы просто использовать this.data.patchValue(data) (или setValue, если все свойства совпадают), но, поскольку у вас есть formarray, вам нужно повторить ваш addressМассив в вашем объекте и отправить формгруппы на ваш Formarray.Кроме того, я не вижу необходимости изначально создавать пустую группу форм при построении формы, поэтому я ее пропустил: 

ngOnInit() {
  this.data = this.FB.group({
    name: [''],
    age: [''],
    address: this.FB.array([])
  })
}

get formArr() {
  return this.data.get('address') as FormArray;
}

// ....
this.data.patchValue({name: data.name, age: data.age});
data.address.forEach((x) => {
  this.formArr.push(this.FB.group(x))
});
...