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

}

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

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

4

3 回答 3

5

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

当异步请求完成并加载数据时，您要么需要应用一个 observable 来观察，要么您可以简单地在“then”内设置您的用户新 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”中调用该方法。

于 2017-06-16T19:35:17.110 回答
2

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

this.user.setValue({fname: this.firstName, lname: this.lastName, phone: this.phone, bio: this.bio});
于 2017-06-16T19:38:59.957 回答
1

setValue()如果控件已创建或在构造函数中使用，则可以使用

new FormControl('your value',

我知道您可以通过某种方式修复它，因为您非常了解反应形式，但该值是以这种方式预先填充的。

于 2017-06-16T19:35:36.670 回答