Question

在一个angular 7应用程序中，我创建了一个经理列表。当用户单击某个项目时，应显示带有填充表格的视图，然后用户可以在其中更新经理详细信息。显示我的视图时，管理器详细信息未显示在表单本身中，并且我在控制台中看到两个错误

错误错误：formGroup需要一个FormGroup实例。请传递一个。

错误TypeError：无法读取null的属性“ firstname”       在ManagerViewComponent.push ../ src / app / manager / manager-view / manager-view.component.ts.ManagerViewComponent.initForm
中

这是我目前的代码。

.ts

import { FormGroup, FormControl } from "@angular/forms";
import { ManagerService } from "./../../services/manager.service";
import { ActivatedRoute, Router } from "@angular/router";
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-manager-view",
  templateUrl: "./manager-view.component.html",
  styleUrls: ["./manager-view.component.css"]
})
export class ManagerViewComponent implements OnInit {
  editManagerForm: FormGroup;
  manager = null;

  constructor(
    private route: ActivatedRoute,
    private managerService: ManagerService
  ) {}

  ngOnInit() {
    this.managerDetails();
    this.initForm();
  }

  private initForm() {
    let firstname = this.manager.firstname;
    let lastname = this.manager.lastname;
    let username = this.manager.username;
    let password = this.manager.password;
    let terminal = this.manager.terminal.name;

    this.editManagerForm = new FormGroup({
      firstname: new FormControl(firstname),
      lastname: new FormControl(lastname),
      username: new FormControl(username),
      password: new FormControl(password),
      terminal: new FormControl(terminal)
    });
  }

  managerDetails() {
    const managerId = this.route.snapshot.paramMap.get("id");

    this.managerService.getManager(managerId).then(data => {
      this.manager = data;
    });
  }

.html

<form id="editManager" [formGroup]="editManagerForm">
  <div class="form-row">
    <div class="col-6 form-group">
        <label for="">Firstname</label>
        <input
        formControlName="firstname"
        type="text"
        class="form-control"
        />
    </div>

    <div class="col-6 form-group">
        <label for="">Lastname</label>
        <input
        formControlName="lastname"
        type="text"
        class="form-control"
        />
    </div>
  </div>

  <div class="form-row">
    <div class="col-6 form-group">
        <label for="terminal">Bus Terminal</label>
        <select formControlName="terminal" class="form-control">
        <option selected>{{ manager.terminal.name }}</option>
        <option *ngFor="let terminal of terminals" [ngValue]="terminal">
            {{ terminal.name }}
        </option>
        </select>
    </div>
  </div>

  <!-- <p>{{ editManagerForm.value | json }}</p> -->
</form>

在app.module.ts中，我像这样正确地同时导入了FormsModule和ReactiveFormsModule

import { FormsModule, ReactiveFormsModule } from "@angular/forms";

显然我做错了，因为这是我第一次尝试填充反应形式。请帮我解决这个问题

Answer 1

初始化editManagerForm时，需要进行以下更改。您应该使用FormBuilder来生成表单组和表单控件。

请记住在组件上导入formBuilder和formGroup。

import { FormBuilder, FormGroup } from '@angular/forms';
.
.
constructor(
  private formBuilder: FormBuilder,
) { }

editManagerForm: FormGroup = this.formBuilder.group({
    firstName: [null],
    lastName: [null],
    username: [null],
    password: [null],
    terminal: [null],
}

我假设您将在editManagerForm方法中填充managerDetails()。您可以使用patchValue：

managerDetails() {
  const managerId = this.route.snapshot.paramMap.get("id");

  this.managerService.getManager(managerId).then(data => {
    this.editManagerForm.patchValue(data);
  });
}

注意：我假设您从getManager()获取的数据是以下格式的对象

data = {
  firstName: '',
  lastName: '',
  username: '',
  password: '',
  terminal: ''
}

正确填充角反应形式

1 个答案: