Angulaire 2 - Comment se lier automatiquement les valeurs de l'objet de relatives aux Contrôles de Formulaire?

Je suis en utilisant model driven forms et je suis à la recherche d'une meilleure façon de lier les données liées à formControlName's parce que j'ai plus de 25 champs dans mon formulaire et je ne veux pas avoir à écrire de code pour tous les champs comme je l'ai écrit ci-dessous.

Modèle:

<input type="text"
       class="form-control"
       formControlName="firstName"
       name="firstName"
       placeholder="First Name"
       required>

Composant:

this.refferalService.getReferringDataEdit(id).subscribe(
  result => {
    this.referringData = result.responseObject;
    this.refferalForm.patchValue({ 
      firstName: this.referringData.firstName 
    })
  }
)

Est-il un moyen de le faire "automatiquement"?

InformationsquelleAutor Hitesh | 2017-02-22
  1. 8

    Vous pouvez le faire Comme ceci : 

    import {FormGroup,FormBuilder,FormControl} from '@angular/forms';

export class formComponent{
  myForm : FromGroup
  constructor(fb: FormBuilder){
    this.myForm= fb.group({
        'firstName' : [''],
        'lastName' : [''],
    });
 }
 onSubmit(value:string){
   console.log(form);
 }
}

    Plus loin dans votre code HTML à utiliser comme :

    <form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
<input type="text" placeholder="FirstName" [formControl] = "myForm.controls['firstName']">

<input type="text" placeholder="LastName" [formControl] = "myForm.controls['lastName']">
<button type="submit">Submit</button>
</form>

    et le lier avec (ngSubmit) . Donc, chaque fois que vous frappez la soumettre , la valeur sera reflété dans myForm.de la valeur . myForm va stocker la forme de paires clé/valeur.

    Dans la console , votre sortie sera :

    Object : 
firstName:....
lastName: ...

    Vous pouvez vous Référer à : http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/

    EDIt: étant donné que l'exigence était de sauvegarder les données à partir du service:

    Dans votre vous abonner, il suffit de faire comme ceci : this.refferalForm.setValue(this.referringData); setValue attend un objet avec des Paires clé/valeur

    • Salut, j'ai déjà fait ce genre de choses pour enregistrer des données. Je veux savoir comment faire pour lier les données relatives formcontrol de modifier/mettre à jour.
    • dans votre vous abonner, il suffit de faire comme ceci : ce.refferalForm.setValue(ce.referringData); setValue attend un objet avec des Paires clé/valeur .
    • Je suis à l'aide de la ngx-mydatepicker pour la sélection de date et je l'ai utilisé au-dessus de cette.refferalForm.patchValue(ce.referringData) pour lier des données, mais il ne lie pas la date. Une idée sur comment lier date?
    InformationsquelleAutor CruelEngine
  2. 6

    Je vois deux façons de le faire:

    Première approche:

    Vous pouvez créer une méthode générale pour les deux "formes" (new/edit) et créer le formulaire avec ou sans les valeurs, de cette façon:

    ngOnInit() {
  //Imagine that the data is coming from API:
  const referringData = { firstName: 'First', lastName: 'Last' };
  this.initForm(referringData);
}

private initForm(data = {}): void {
  //Note that you can pass nothing to this function, 
  //so the values will be initially undefined (no problem with that)

  this.myForm = this.formBuilder.group({
    firstName: [data.firstName, [Validators.required]],
    lastName: [data.lastName, [Validators.required]]
  });
}

    DÉMO

    Deuxième approche:

    Dans cette approche, vous pouvez le lier automatiquement avec [(ngModel)], de sorte que vous n'avez pas besoin de ne rien faire dans votre fichier de composant.

    ngOnInit() {
  //Imagine that the data is coming from API:
  this.referringData = { firstName: 'First', lastName: 'Last'};

  //init the form as always
}

    Et dans l'utilisation du modèle [(ngModel)] pour lier la valeurs:

    <input type="text" formControlName="firstName" [(ngModel)]="referringData.firstName">

<input type="text" formControlName="lastName" [(ngModel)]="referringData.lastName">

    DÉMO

    Vérifier les sources complètes pour les deux approches ci-dessus.

    Remarque:

    Bien qu'il n'y a rien nulle part en disant que vous ne pouvez pas utiliser les deux FormsModule avec ReactiveFormsModule, je n'avais pas aller avec cela, je préfère utiliser de la première approche.

    InformationsquelleAutor developer033
  3. -1

    De lier la valeur dynamique ou le remplacement de la valeur de fromControl, nous pouvons utiliser patchValue méthode. 

    HTML Code :

 <mat-form-field appearance="outline">
                <mat-label>Email</mat-label>
                <input matInput formControlName="email"  >
                <mat-icon matSuffix class="secondary- 
                text">mail</mat-icon>

 </mat-form-field>    

Component Code :

ngOnInit () {
/** This create form group */
 this.resetPasswordForm = 
    this._formBuilder.group({
        email:new FormControl({ value: '', disabled:true }),
    });
    this.updateEmail()
}

updateEmail(){
    /** Update value of formControl */
     this.resetPasswordForm.patchValue({
            email: '[email protected]'
 });
}
    InformationsquelleAutor Rohit Parte