找不到具有名称的控件：'成分角度错误

Question

我的 HTML 组件文件

我已经在网上搜索了一整天但无法解决这个问题，下面是我的 HTML 文件 我正在尝试在最后工作时获取输入表单，但不断收到错误（如下所示）

<div class="row">
  <div class="col-xs-12">
    <form [formGroup]="BugForm" (ngSubmit)="onSubmit()">
      <div class="row">
        <div class="col-xs-12">
          <button type="submit" class="btn btn-success">Save</button>
          <button type="button" class="btn btn-danger">Cancel</button>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group">
            <label for="name">Name</label>
            <input
              type="text"
              id="name"
              formControlName="name"
              class="form-control"
            />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group">
            <label for="imagePath">Image URL</label>
            <input
              type="text"
              id="imagePath"
              formControlName="imagePath"
              class="form-control"
              #imagePath
            />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <img [src]="" class="img-responsive" />
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group">
            <label for="description">Description</label>
            <textarea
              type="text"
              id="description"
              class="form-control"
              formControlName="description"
              rows="6"
            ></textarea>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group">
            <p>Please select Bug Priority:</p>
            <input
              type="radio"
              id="low"
              name="priority"
              value="low"
              formControlName="priority"
            />
            <label for="male">Low</label><br />
            <input
              type="radio"
              id="medium"
              name="priority"
              value="medium"
              formControlName="priority"
            />
            <label for="female">Medium</label><br />
            <input
              type="radio"
              id="high"
              name="priority"
              value="high"
              formControlName="priority"
            />
            <label for="other">High</label>
          </div>
          <div class="form-group">
            <p>Please select Bug Status:</p>
            <input
              type="radio"
              id="open"
              name="status"
              value="open"
              formControlName="status"
            />
            <label for="male">Open</label><br />
            <input
              type="radio"
              id="ongoing"
              name="status"
              value="ongoing"
              formControlName="status"
            />
            <label for="female">OnGoing</label><br />
            <input
              type="radio"
              id="closed"
              name="status"
              value="closed"
              formControlName="status"
            />
            <label for="closed">closed</label>
          </div>
        </div>
      </div>
      <!-- ingredients might wana remove -->
      <div class="row">
        <div class="col-xs-12" formArrayName="ingredients">
          <div
            class="row"
            style="margin-top: 10px"
            *ngFor="let ingredientCtrl of getControls(); let i = index"
            [formGroupName]="i"
          >
            <div class="col-xs-8">
              <input type="text" 
              class="form-control" 
              formControlName="name" />
            </div>
            <div class="col-xs-2">
              <input
                type="number"
                class="form-control"
                formControlName="amount"
              />
            </div>
            <div class="col-xs-2">
              <button type="button" class="btn btn-danger">X</button>
            </div>
          </div>
          <hr />
          <div class="row">
            <div class="col-xs-12">
              <button type="button" class="btn btn-success">Add Bug</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

我的 Ts 文件

下面这个是我的ts组件文件

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
import { ActivatedRoute,Params} from '@angular/router';
import { RecipeService } from '../recipe.service';

@Component({
  selector: "app-recipe-edit",
  templateUrl: "./recipe-edit.component.html",
  styleUrls: ["./recipe-edit.component.css"],
})
export class RecipeEditComponent implements OnInit {
  id: number;
  editMode = false;
  BugForm: FormGroup;

  constructor(
    private route: ActivatedRoute,
    private recipeService: RecipeService
  ) {}
  // get controls() {
  //   // a getter!
  //   return (<FormArray>this.BugForm.get("ingredients")).controls;
  // }

  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.id = +params["id"];
      this.editMode = params["id"] != null;
      this.initForm();
    });
  }
  onSubmit() {
    console.log(this.BugForm);
  }
  getControls() {
    return (this.BugForm.get("ingredients") as FormArray).controls;
  }

  private initForm() {
    let bugName = "";
    let bugImagePath = "";
    let bugDescription = "";
    let bugPriority = "";
    let bugStatus = "";
    let BugIngredients = new FormArray([]);

    if (this.editMode) {
      const bug = this.recipeService.getRecipe(this.id);
      bugName = bug.name;
      bugImagePath = bug.imagePath;
      bugDescription = bug.description;
      bugPriority = bug.priority;
      bugStatus = bug.status;
      if (bug["ingredients"]) {
        for (let ingredient of bug.ingredients) {
          BugIngredients.push(
            new FormGroup({
              name: new FormControl(ingredient.name),
              amount: new FormControl(ingredient.amount),
            })
          );
        }
      }
    }
    this.BugForm = new FormGroup({
      name: new FormControl(bugName),
      imagePath: new FormControl(bugImagePath),
      description: new FormControl(bugDescription),
      priority: new FormControl(bugPriority),
      status: new FormControl(bugStatus),
      ingredinets: BugIngredients,
    });
  }
}

我的错误信息

ERROR Error: Cannot find control with name: 'ingredients'
    at _throwError (shared.ts:295)
    at setUpFormContainer (shared.ts:266)
    at FormGroupDirective._setUpFormContainer (form_group_directive.ts:322)
    at FormGroupDirective.addFormArray (form_group_directive.ts:227)
    at FormArrayName.ngOnInit (form_group_name.ts:170)
    at callHook (core.js:2573)
    at callHooks (core.js:2542)
    at executeInitAndCheckHooks (core.js:2493)
    at selectIndexInternal (core.js:8449)
    at ɵɵadvance (core.js:8432)

我已尝试将控制方法外包给 ts 文件，但不断收到错误请帮助...

Answer 1

我把配料拼错了，猜我有阅读障碍