如何使用角度中的 formGroup 在选择中设置选项？

Question

我有简单的网络应用程序（crud），我可以将数据保存到数据库中。当我想要编辑数据库数据中的现有集合时，应该将其加载到编辑窗口中，以便更好地运行我的网站。我设法将数据加载到 simple<input type='text'>和 to <input type='nubmer'>，但万一我想将数据加载到此则<select>不起作用。在我选择的选项中，有来自数据库的数据，并且工作正常。

我有一个问题，当我单击编辑按钮时，仅person_name不会加载到<select>

HTML：

<div class="card">
  <div class="card-body">
    <form [formGroup]="expenForm" novalidate>
      <div class="form-group">
        <label class="col-md-4"> Person Name</label>
        <select class="form-control" formControlName="person_name" #person_name>
          <option *ngFor="let person of people">
            {{ person.person_name }}
          </option>
        </select>
      </div>

      <div class="form-group">
        <label class="col-md-4"> Amount</label>
        <input
          type="number"
          class=" form-control"
          min="0"
          formControlName="amount"
          #amount
        />
      </div>

      <div class="form-group">
        <label class="col-md-4"> Description</label>
        <input
          class="form-control"
          formControlName="description"
          #description
          maxlength="100"
        />
      </div>
      <div class="form-group">
        <button
          (click)="
            updateExpen(person_name.value, amount.value, description.value)
          "
          class="btn btn-primary"
        >
          Submit expen
        </button>
      </div>
    </form>
  </div>
</div>

TS：

import { Component, OnInit, Input } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import {
  FormGroup,
  FormBuilder,
  Validators,
  FormControl
} from "@angular/forms";
import { ExpenService } from "../expen.service";
import Expen from "../Expen";

@Component({
  selector: "app-edit-expen",
  templateUrl: "./edit-expen.component.html",
  styleUrls: ["./edit-expen.component.scss"]
})
export class EditExpenComponent implements OnInit {
  @Input() displayText: String;

  expen: any = {};
  expenForm: FormGroup;
  public people: Expen[];

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private fb: FormBuilder,
    private es: ExpenService
  ) {
    this.createForm();
  }

  createForm() {
    this.expenForm = this.fb.group({
      person_name: ['', Validators.required],
      amount: [this.expen.amount, Validators.required],
      description: [this.expen.description, Validators.required]
    });
  }

  updateExpen(person_name, amount, description) {
    this.route.params.subscribe(params => {
      this.es.updateExpen(person_name, amount, description, params["id"]);
      this.router.navigate(["/expen"]);
    });
  }
  ngOnInit() {
    this.route.params.subscribe(params => {
      this.es.editExpen(params["id"]).subscribe(res => {
        this.expen = res;
      });
    });

    this.es.getAllPeople().subscribe((data: Expen[]) => {
      this.people = data;
    });

    this.createForm();
  }
}

我尝试过person_name: [this.expen.person_name, Validators.required]： expenForm=new FormGroup({person_nam: new FormControl(this.expen.person_name)});

但这不起作用。您有解决这个问题的想法吗？

Answer 1

在构造函数中将表单创建为空：

createForm() {
  this.expenForm = this.fb.group({
    person_name: ['', Validators.required],
    amount: ['', Validators.required],
    description: ['', Validators.required]
  });
}

添加[value]到您的选项，并在您有值时使用setValue或，因为这是异步的patchValue

<option *ngFor="let person of people" [value]="person.person_name">

TS：

this.es.editExpen(params["id"]).subscribe(res => {
  this.expen = res;
  this.expenForm.setValue({
    person_name: this.expen.person_name,
    amount: this.expen.amount
    description: this.expen.description
  });
});

或者，如果您知道您的对象与表单结构匹配，您也可以使用：

this.expenForm.setValue(this.expen)

createForm还要从 中删除OnInit，你已经在构造函数中拥有它了。