Angular 2 FormGroups和语义UI错误

Question

我正在利用Angular CLI和对RC5的支持，并且我正在尝试利用Semantic UI library，并且我正在尝试在我的表单中利用它们的各种表单元素，比如<input>，利用FormGroups。

下面是我的错误：

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./SemanticInputComponent class SemanticInputComponent - inline template:0:19
ORIGINAL EXCEPTION: TypeError: Cannot read property 'valid' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'valid' of undefined
    at DebugAppView._View_SemanticInputComponent0.detectChangesInternal (SemanticInputComponent.ngfactory.js:163:54)
    at DebugAppView.AppView.detectChanges (http://localhost:4200/main.bundle.js:64298:14)
    at DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:64404:44)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:64324:19)
    at DebugAppView._View_SubmitLinkComponent0.detectChangesInternal (SubmitLinkComponent.ngfactory.js:360:8)
    at DebugAppView.AppView.detectChanges (http://localhost:4200/main.bundle.js:64298:14)
    at DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:64404:44)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:64324:19)
    at DebugAppView._View_SubmitLinkComponent_Host0.detectChangesInternal (SubmitLinkComponent.ngfactory.js:37:8)
    at DebugAppView.AppView.detectChanges (http://localhost:4200/main.bundle.js:64298:14)
ERROR CONTEXT:
[object Object]

这是我的表格：

<form [formGroup]="submitLinkForm" novalidate (ngSubmit)="onSubmit(submitLinkForm.value, submitLinkForm.valid)">
      <ul>
        <li>
          <label>Title</label>
          <sm-input [control]="title" class="left" placeholder="Enter title..."></sm-input>
          <small [hidden]="submitLinkForm.controls.title.valid || (submitLinkForm.controls.title.pristine && !submitted)">
              Title is required
          </small>
        </li>
        <li><input type="submit" value="Submit" /></li>
      </ul>
    </form>

这是我的组件(简化版)

import { Component, OnInit } from '@angular/core';
import { Validators } from '@angular/common';
import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-submit-link',
  templateUrl: './submit-link.component.html',
  styleUrls: ['./submit-link.component.scss'],
  directives: [REACTIVE_FORM_DIRECTIVES]
})
export class SubmitLinkComponent implements OnInit {
  public submitLinkForm: FormGroup; // our model driven form
  public submitted: boolean; // keep track on whether form is submitted
  public events: any[] = []; // use later to display form changes

  constructor(
    private _fb: FormBuilder
  ) { }

  ngOnInit() {
    this.submitLinkForm = this._fb.group({
      title: ['', [<any>Validators.required]],
    });
  }

  onSubmit(data, isValid) {

    if (isValid) {}
  }
}

有人知道我为什么要写这篇文章吗？它似乎与输入字段上的[control]属性有关。

Answer 1

我需要将输入字段更改为以下内容，从而解决了此问题：

<sm-input [control]="submitLinkForm.controls.title" class="left" placeholder="Enter title..."></sm-input>

看起来，控件属性需要访问实际的FormGroup控件

Answer 2

使用这个

  <small [hidden]="submitLinkForm.controls['title'].valid || (submitLinkForm.controls['title'].pristine && !submitted)">
          Title is required
      </small>