将预填充值传递给 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 已经完成。它正在异步工作以避免降低应用程序的速度。

您需要应用一个可观察对象来观察您的异步请求何时完成并加载数据，或者您可以简单地在 "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" 中调用该方法。

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

将预填充值传递给 Angular 2 反应形式输入的方法是什么

What is the way to pass pre-populated values to Angular 2 reactive form input

typescript

angular

angular-reactive-forms