Meilleure façon de passer des valeurs pré-remplies à l'entrée de forme réactive angulaire 2

Question

import { Component, OnInit } from '@angular/core'; 
import { FormControl, FormGroup, Validators } from '@angular/forms'; 

import { User } from '../account.interface'; 
import { AF } from '../angularfire.service'; 

@Component({ 
    selector: 'app-account', 
    templateUrl: './account.component.html', 
    styleUrls: ['./account.component.less'] 
}) 
export class AccountComponent implements OnInit { 
    public error: any; 
    user: FormGroup; 
    onSubmit() { 
    console.log(this.user.value, this.user.valid); 
    } 

    currentUserDetails = []; 
    firstName: string = ''; 
    lastName: string = ''; 
    email: string = ''; 
    phone: string = ''; 
    bio: string = ''; 
    userID: string = ''; 

    constructor(private afService: AF) { 
    // Get current user details and push to array. This is due to input values overwriting ngModels. 
    afService.getCurrentUserInfo().then(currentUserDetails => { 
     let currentUser = []; 
     currentUser.push(currentUserDetails); 
     this.firstName = currentUser[0].firstName; 
     this.lastName = currentUser[0].lastName; 
     this.email = currentUser[0].email; 
     this.phone = currentUser[0].phone; 
     this.bio = currentUser[0].bio; 
     this.userID = currentUser[0].userID; 
    }).then(() => { 

    }) 
    } 

    // Update the user details with the form entry. 
    // updateUserEntry(firstName, lastName, phone, bio) { 
    // this.afService.updateUserEntry(this.userID, firstName, lastName, phone, bio).then(() => { 
    //  location.reload(); 
    // }).catch((error) => { 
    //  this.error = error; 
    //  console.log("error"); 
    // }); 
    // } 

    ngOnInit() { 
    this.user = new FormGroup({ 
     fname: new FormControl(this.firstName, [Validators.required, Validators.minLength(3), Validators.maxLength(24)]), 
     lname: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(24)]), 
     phone: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(24)]), 
     bio: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(50)]), 
    }); 
    } 

} 

Je sais que c'est probablement une solution très simple, je ne la vois pas. J'ai mon formControl réactif dans mon ngOnInit mais j'ai besoin de passer des valeurs prédéfinies dans chaque entrée (qui est this.firstName, this.lastName, etc.). Lorsque la vue est chargée, les entrées sont vides. Je crois que les valeurs ne s'affichent pas parce que le formulaire est chargé avant que les valeurs soient remplies. Des idées pour résoudre le problème?

Answer 1

Vous auriez raison. ngOnInit est déjà fait avant que votre getCurrentUserInfo ait fini de recevoir des données de votre service. Il fonctionne de manière asynchrone pour éviter de ralentir l'application.

Vous avez besoin soit d'appliquer une observable à regarder lorsque votre requête asynchrone est terminée et les données sont chargées ou vous pouvez simplement configurer votre nouvel utilisateur FormGroup à l'intérieur de la « puis » comme ceci:

afService.getCurrentUserInfo().then(currentUserDetails => { 
    let currentUser = []; 
    currentUser.push(currentUserDetails); 
    this.firstName = currentUser[0].firstName; 
    this.lastName = currentUser[0].lastName; 
    this.email = currentUser[0].email; 
    this.phone = currentUser[0].phone; 
    this.bio = currentUser[0].bio; 
    this.userID = currentUser[0].userID; 

    this.user = new FormGroup({ 
     fname: new FormControl(this.firstName, [Validators.required, Validators.minLength(3), Validators.maxLength(24)]), 
     lname: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(24)]), 
     phone: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(24)]), 
     bio: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(50)]), 
    }); 
}) 

mieux encore, vous pouvez créer une nouvelle méthode pour la réutilisabilité:

SetFormGroup() { 
    this.user = new FormGroup({ 
     fname: new FormControl(this.firstName, [Validators.required, Validators.minLength(3), Validators.maxLength(24)]), 
     lname: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(24)]), 
     phone: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(24)]), 
     bio: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(50)]), 
    }); 
} 

Et appelez cette méthode dans le "alors".

Answer 2

Vous pouvez utiliser setValue si le contrôle est déjà créé ou l'utiliser dans le constructeur

new FormControl('your value', 

Je sais que vous pouvez corriger une certaine façon parce que vous connaissez bien la forme réactive, mais la valeur est pré-remplie en cette façon.

Answer 3

Résolution du problème à l'aide de setValue de Angular 2. Exemple de solution de code:

this.user.setValue({fname: this.firstName, lname: this.lastName, phone: this.phone, bio: this.bio});