7
votes

Angular2 patchValue les données JSON à formArray

J'ai des données Json comme celle-ci:

assets/details.json

<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>

Je veux afficher toutes ces données JSON dans Formes angulaires avec patchValue .

J'ai essayé ceci.

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 })
    }
}

Et je ' J'ai conçu ma page HTML comme ceci: app.component.html

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

Mais rien ne fonctionne comme prévu. Rien ne peut remplir le formulaire. Je ne sais pas comment faire plus.

Comment puis-je obtenir toutes ces données JSON dans les champs de formulaire?

angular formarray

7 commentaires

vous devez appeler la méthode patchValue () sur le formControl et non sur le formGroup

Je ne pourrais pas comprendre ça. Pouvez-vous expliquer plus ?

Sinon, comment faire cela dans formGroup? Je suis nouveau dans angular.

Fonctionne-t-il avec this.data.patchValue (data) au lieu de this.data.patchValue ({data}) ?

essayez de patcher le contrôle, par exemple this.data.controls.name.patchValue (data.name); et puis la même chose pour le reste

@BenjaminRussell Vous pouvez très bien utiliser setValue ou patchValue pour un FormGroup avec un objet entier ... mais voici aussi un FormArray, donc cela ne fonctionnera pas, mais ce serait le cas s'il n'y en avait pas :)

Exactement. J'ai un problème avec FormArray. Comment puis-je mettre des valeurs dans FormArray? Aidez-moi, s'il vous plaît.

3 Réponses :

1
votes

Si vous ne devez pas avoir de FormArray dans votre formulaire, vous pouvez simplement utiliser this.data.patchValue (data) (ou setValue code > si toutes les propriétés correspondent), mais puisque vous avez un formarray, vous devez itérer votre tableau address dans votre objet et pousser les formgroups vers votre formarray. De plus, je ne vois pas la nécessité de créer initialement un groupe de formulaires vide lors de la création du formulaire, donc je l'ai laissé de côté:

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))
});

6 commentaires

D'accord, je vais l'essayer.

Il y a un getter, d'où nous renvoyons l'adresse FormArray. J'aime le raccourcir, donc par exemple dans le template pas besoin d'utiliser let x de data.get ('address) .controls , vous pouvez simplement utiliser formArr.controls à la place , il en va de même pour le fichier ts, mais pas besoin de getter si vous n'en voulez pas :)

Cela a fonctionné aussi correctement. Merci pour ça. Mais j'ai un problème simple, il montre une erreur comme ça. Pourriez-vous m'aider à comprendre cela, comment résoudre cela? lien image: imgur.com/a/wPQj2Ij

Assurez-vous d'abord d'effacer votre FormArray, car vous ne transmettez que de nouveaux éléments lors de l'application de correctifs

HttpClient analyse votre réponse à un objet, mais ne sait pas ce que cet objet contient. Je suppose ici que vous n'avez pas tapé votre réponse dans votre service, ce qui cause le problème. Quoi qu'il en soit, il y a une section dans la documentation httpclient. En bref, utilisez la notation entre crochets ou créez une interface (l'interface est ma suggestion): angular.io/guide/http#type-checking-the-response

Merci beaucoup. Cela fonctionne parfaitement pour moi. Merci beaucoup.

6
votes

patchValue ne met à jour que le FormArray existant, il ne modifiera pas la structure de votre FormArray . Vous devez vous assurer que votre FormArray est de la bonne taille avant de le corriger, vous pouvez également le recréer complètement, comme indiqué ci-dessous:

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 ;
}));

Voir ceci post pour plus de détails .

0 commentaires

0
votes

  this.formCustomer.patchValue({ ...response.data })
   response.data.contactos.forEach(c => {
     this.contactos.push(this.Contact(c))
    });
      
get contactos(): FormArray {
  return <FormArray>this.formCustomer.get("contactos")
      }

Contact(item?:any): FormGroup {
        return this.fb.group({
          tipo: [item?item.tipo:'', [Validators.required]],
          nombre: [item?item.nombre:'', [Validators.required]],
          tel: [item?item.tel:'', [Validators.required]],
          tel_2: [item?item.tel_2:''],
        })
      }
this.formCustomer = this.fb.group({
    contactos: this.fb.array([this.Contact()]),
    })

0 commentaires