web-dev-qa-db-fra.com

Comment définir la valeur du contrôle de formulaire dans les formulaires réactifs dans Angular

Salut tout le monde, je suis nouveau à angulaire. En fait, j'essaie de souscrire des données à partir d'un service et ces données, je passe pour contrôler le mien (par exemple, c'est comme un formulaire d'édition).

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { QuestionService } from '../shared/question.service';

@Component({
  selector: 'app-update-que',
  templateUrl: './update-que.component.html',
  styleUrls: ['./update-que.component.scss']
})
export class UpdateQueComponent implements OnInit {

  questionsTypes = ['Text Type', 'Multiple choice', 'Single Select'];
  selectedQuestionType: string = "";
  question: any = {};

  constructor(private route: ActivatedRoute, private router: Router,
    private qService: QuestionService, private fb: FormBuilder) { 

  }

  ngOnInit() {
      this.getQuebyid();
  }

  getQuebyid(){
    this.route.params.subscribe(params => {
      this.qService.editQue([params['id']]).subscribe(res =>{
        this.question = res;
      });
    });
  }

  editqueForm =  this.fb.group({
    user: [''],
    questioning: ['', Validators.required],
    questionType: ['', Validators.required],
    options: new FormArray([])
  })

  setValue(){
    this.editqueForm.setValue({user: this.question.user, questioning: this.question.questioning})
  }

}

si j'utilise [(ngModule)] sur mon champ de formulaire pour définir la valeur de mon élément, cela fonctionne bien et affiche un avertissement, il sera obsolète dans la version angular 7).

<textarea formControlName="questioning" [(ngModule)]="question.questioning" cols="70" rows="4"></textarea>

J'ai donc défini les valeurs de mon contrôle de formulaire en faisant ci-dessous, mais l'élément n'affiche pas ces valeurs.

setValue(){
   this.editqueForm.setValue({user: this.question.user, questioning: this.question.questioning})
}

quelqu'un peut-il me dire comment définir des valeurs pour extraire la forme réactive. Veuillez me suggérer.

angularangular7angular-reactive-forms
24
sun

La définition ou la mise à jour de formulaires réactifs Les valeurs de contrôle de formulaire peuvent être effectuées à l'aide de patchValue et setValue. Cependant, il peut être préférable d'utiliser patchValue dans certains cas.

patchValue ne nécessite pas que tous les contrôles soient spécifiés dans les paramètres pour mettre à jour/définir la valeur de vos contrôles de formulaire. D'un autre côté, setValue requiert que toutes les valeurs du contrôle de formulaire soient remplies, et il renverra une erreur si l'un de vos contrôles n'est pas spécifié dans le paramètre.

Dans ce scénario, nous voudrons utiliser patchValue, car nous mettons uniquement à jour user et questioning:

this.qService.editQue([params["id"]]).subscribe(res => {
  this.question = res;
  this.editqueForm.patchValue({
    user: this.question.user,
    questioning: this.question.questioning
  });
});

EDIT: Si vous avez envie de faire une partie de l'ES6 Object Destructuring , vous pourriez être intéressé à le faire à la place ????

const { user, questioning } = this.question;

this.editqueForm.patchValue({
  user,
  questioning
});

Et voilà!

33
wentjun

Dans Formulaire réactif, il existe 2 solutions principales pour mettre à jour la ou les valeurs des champs de formulaire.

setValue:

  • Initialiser Structure du modèle dans le constructeur:

    this.newForm = this.formBuilder.group({  
   firstName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(8)]],
   lastName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(8)]]
});

  • Si vous souhaitez mettre à jour tous les champs du formulaire:

    this.newForm.setValue({
   firstName: 'abc',
   lastName: 'def'
});

  • Si vous souhaitez mettre à jour un champ de formulaire spécifique:

    this.newForm.controls.firstName.setValue('abc');

Remarque: Il est obligatoire de fournir une structure de modèle complète pour tous les contrôles de champ de formulaire au sein du FormGroup. Si vous manquez une propriété ou des collections de sous-ensembles, cela lèvera une exception.

patchValue:

  • Si vous souhaitez mettre à jour certains champs de formulaire/spécifiques:

    this.newForm.patchValue({
   firstName: 'abc'
});

Remarque: Il n'est pas obligatoire de fournir une structure de modèle pour tous/tous les contrôles de champ de formulaire dans FormGroup. Si vous manquez des collections de propriétés ou de sous-ensembles, il ne lèvera aucune exception.

9
Nadim Hossain Sonet

La solution "habituelle" est de créer une fonction qui retourne un formGroup vide ou un formGroup plein

createFormGroup(data:any)
{
 return this.fb.group({
   user: [data?data.user:null],
   questioning: [data?data.questioning:null, Validators.required],
   questionType: [data?data.questionType, Validators.required],
   options: new FormArray([this.createArray(data?data.options:null])
})
}

//return an array of formGroup
createArray(data:any[]|null):FormGroup[]
{
   return data.map(x=>this.fb.group({
        ....
   })
}

puis, dans SUBSCRIBE, vous appelez la fonction

this.qService.editQue([params["id"]]).subscribe(res => {
  this.editqueForm = this.createFormGroup(res);
});

attention !, votre formulaire doit inclure un * ngIf pour éviter une erreur initiale

<form *ngIf="editqueForm" [formGroup]="editqueForm">
   ....
</form>
3
Eliseo

Essaye ça.

editqueForm =  this.fb.group({
   user: [this.question.user],
   questioning: [this.question.questioning, Validators.required],
   questionType: [this.question.questionType, Validators.required],
   options: new FormArray([])
})

setValue et patchValue

si vous souhaitez définir la valeur d'un contrôle, cela ne fonctionnera pas, vous devez donc définir la valeur des deux contrôles:

formgroup.setValue ({nom: "abc", âge: "25"}); Il est nécessaire de mentionner tous les contrôles à l'intérieur de la méthode. Si cela n'est pas fait, cela générera une erreur.

D'un autre côté, la valeur du patch est beaucoup plus facile à réaliser sur cette partie, disons que vous ne voulez attribuer le nom qu'en tant que nouvelle valeur:

formgroup.patchValue ({name: ’abc’});

1
TAB

Pour attribuer une valeur à un seul contrôle de formulaire/individuellement, je propose d'utiliser setValue de la manière suivante:

this.editqueForm.get('user').setValue(this.question.user);

this.editqueForm.get('questioning').setValue(this.question.questioning);
1
Devner