在 Reactive Forms 中获取值

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

}

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

Answer 1

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

patchValue()

Patches the value of the FormGroup. It accepts an object with control names as keys, and will do its best to match the values to the correct controls in the group.

setValue()

Sets the value of the FormGroup. It accepts an object that matches the structure of the group, with control names as keys.

This method performs strict checks, so it will throw an error if you try to set the value of a control that doesn't exist or if you exclude the value of a control.

It accepts both super-sets and sub-sets of the group without throwing an error.

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 from angular.

Answer 3

如果你控制反应形式的完整目标。您找到一个名称为 "value" 的密钥。

console.log(this.empresaForm.value)

包含所有表单控件值，

在 Reactive Forms 中获取值

get values in Reactive Forms

angular

angular-reactive-forms