Angular 2 表单控件未定义

Question

我有一个 angular 2 组件，它有一个带有一些控件的表单，在我的 html 中，我使用 "categories" 控件的有效属性并且它抱怨：

Cannot read property 'valid' of undefined

在这行 html 代码中：[ngClass]="{'no-error': addForm.controls.categories.valid ||

组件class:

export class AddFormComponent implements OnInit {

  private addForm: FormGroup;
  private mealSelected: boolean;

    constructor(
        private formBuilder: FormBuilder,
        el: ElementRef) { }

    ngOnInit() {
        this.addForm = this.formBuilder.group({
            categories: [null, Validators.required],
            mealTypes: [[], this.mealTypesValidator()],
            brand: [null, Validators.required],
            name: [null, Validators.required],
            description: [null, Validators.required],
      image: null,
            webUrl: null,
        });
    }...

组件html:

    <small 
        [ngClass]="{'no-error': addForm.controls.categories.valid || 
        (addForm.controls.categories.pristine && !submitted)}" 
        class="text-danger">Please select at least 1 category.
    </small>

所以说addForm.controls.categories没有定义。当我在 ngOnInit 中定义 addForm.controls.categories 时，这怎么可能？可能有一些明显的东西我太慢没能发现。

编辑：等等，忘了补充上面的html在里面：

<form class="text-uppercase" (ngSubmit)="onSubmit()" #addForm="ngForm">

Answer 1

更改您的表单标签 HTML 如下：

<form class="text-uppercase" (ngSubmit)="onSubmit()" [formGroup]="addForm">

由于您已将 addForm 声明为 FormGroup，因此您必须使用 FormGroupDirective 而非 'ngForm'

Answer 2

您需要导入 FormControl

import { FormControl } from '@angular/forms';

Angular 2 表单控件未定义

Angular 2 form control undefined

angular2-forms

angular