Question

我无法在我的被动表单上填充实体数据。

我可以获取数据，但我不知道如何或何时用这些值填写表单的最佳时间。

这是我的表格：

import { Component, OnInit, Input } from '@angular/core';

import { FormArray, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

import { Empresa } from '../empresa.model';

import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-empresa-detalhe',
  templateUrl: './empresa-detalhe.component.html',
  styleUrls: ['./empresa-detalhe.component.scss']
})
export class EmpresaDetalheComponent implements OnInit {

  empresaForm: FormGroup;

  nomeControl: FormControl;
  statusControl: FormControl;

  empresa: Empresa = {};

  constructor(private route: ActivatedRoute, private http: HttpClient, private fb: FormBuilder) {}

  ngOnInit() {
    this.getEmpresa(this.route.snapshot.params['nome']);
    this.createForm();
  }

  createForm() {
    this.nomeControl = new FormControl('', [
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(10)
    ]);
    this.statusControl = new FormControl('', [
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(10)
    ]);

    this.empresaForm = this.fb.group({
      nome: this.nomeControl,
      status: this.statusControl
    });
  }

  onSubmit() {
    const empresa = this.empresaForm.value as Empresa;
    console.log('Empresa: ', empresa);
  }

  getEmpresa(nome) {
    this.http.get('http://localhost:8080/app-rest/api/empresasAereas/nome/' + nome).subscribe(data => {
      this.empresa = data;
      console.log(this.empresa); // this return my data with values
    });
  }

}

我的getEmpresa返回我的empresa模型，用我的实体数据填充表单数据的最佳方法是什么？

Answer 1

您应该在http get调用返回后更新您的表单。您可以使用patchValue或setValue方法。

<强> patchValue（）

修补FormGroup的值。它接受一个控件名称为键的对象，并尽力将值与组中正确的控件匹配。

<强>的setValue（）

设置FormGroup的值。它接受一个与组结构匹配的对象，控件名称为键。

此方法执行严格检查，因此如果您尝试设置不存在的控件的值或者排除控件的值，则会抛出错误。

它接受组的超集和子集而不会抛出错误。

getEmpresa(nome) {
  this.http.get('http://localhost:8080/app-rest/api/empresasAereas/nome/' + nome).subscribe(data => {
    empresaForm.setValue(data)
  });
}

此外，您的createForm()方法可以简化为：

createForm() {
  this.empresaForm = this.fb.group({
    nomeControl: ['', [
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(10)
    ]],
    statusControl: ['', [
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(10)
    ]],
  })
}

Answer 2

您应该在ngOnInit()中做的第一件事是构建表单，然后调用getEmpresa()函数。（你正在做相反的事情）。

ngOnInit() {
    this.createForm();
    this.getEmpresa(this.route.snapshot.params['nome']);
}

然后在getEmpresea() function中设置表单数据，理想情况下，这应该是您将数据设置到表单的位置，但无论如何这将取决于您希望如何执行。

如果您的getEmpresa()函数返回的数据与表单的结构具有相同的结构，那么您只需执行以下操作：

this.http.get('http://localhost:8080/app-rest/api/empresasAereas/nome/' + nome).subscribe(data => {
  ...
  this.empresaForm.setValue(data);
  ...
});

如果您的表单具有不同的结构，那么请在订阅中执行以下操作：

this.empresaForm.setValue({
   nome:    data.nomeValue,
   status: data.statusValue
});

此处，您可以为表单模型设置值，例如：setValue()和patchValue()。 @Tomasz Kula清楚地说明了区别，你也可以从角度看到this link。

Answer 3

如果您管理反应形式的完整对象。您会发现一个名为“值”的键。

console.log(this.empresaForm.value)

包含所有FormControls值，

获取Reactive Forms中的值

3 个答案: