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已经完成。它是异步工作以避免减慢应用程序。

您需要应用一个observable来监视异步请求何时完成并且数据已加载，或者您只需将用户新的FormGroup设置为“then”，如下所示：

MapSearchController

更好的是，您可以创建一种可重用的新方法：

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

然后在“then”中调用该方法。

Answer 2

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

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

Answer 3

如果已创建控件，则可以使用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)]), }); }或在构造函数

中使用它

setValue

我知道你可以通过某种方式修复它，因为你很清楚反应形式但是这个值是以这种的方式预先填充的。

将预先填充的值传递给Angular 2反应形式输入

3 个答案: