将预先填充的值传递给Angular 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)]), 
    }); 
    } 

} 

我知道这可能是一个非常简单的修复，我只是没有看到它。我在我的ngOnInit我反应formControl的，但我需要传递预设值到每个输入（这是this.firstName，this.lastName等）。当视图加载时，输入是空的。

我相信这些值没有显示出来，因为在填充值之前表单正在加载。有想法该怎么解决这个吗？

Answer 1

你会是对的。在您的getCurrentUserInfo完成从您的服务接收数据之前，ngOnInit已经完成。它正在异步工作以避免减慢应用程序。

你要么需要申请可观察看，当你的异步请求完成，加载了数据，也可以简单地设置您的用户的新FormGroup的“然后”里面是这样的：

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

更好

然而，您可以创建一种新的重用方法：

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

并在“then”中调用该方法。

Answer 2

您可以使用setValue如果已经创建控件或者用它在构造函数中

new FormControl('your value', 

我知道，你可以解决它的一些办法，因为你知道反应形式很好，但价值被预先填充在这个的方式。

Answer 3

使用Angular 2的setValue解决了这个问题。示例代码解决方案：

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