1

我正在尝试制作一个组件，该组件将在给定控制输入名称的情况下显示特定的错误消息。这是我的代码...

注册.ts：

import { Component } from 'angular2/core';
import { FormBuilder, Validators } from 'angular2/common';
import {ControlMessages} from './control-msg';
@Component({
    selector: 'registration-form',
    templateUrl: './app/components/registration/registration.html',
    directives: [ControlMessages]
})

控制-msg.ts：

import {Component, Host} from 'angular2/core';
import {NgFormModel,FORM_PROVIDERS} from 'angular2/common';
@Component({
    selector: 'control-messages',
    inputs: ['controlName: control'],
    template: `<div *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ControlMessages {
    controlName: string;
    constructor( @Host() private _formDir: NgFormModel){/* _formDir doesn't get the parent object! */}

    get errorMessage() {
        // Find the control in the Host (Parent) form
        let c = this._formDir.form.find(this.controlName);
        return null;
    }
}

问题是你可以看到ControlMessagescan't get the value of my parent NgFormModel。

Angular 2 向我显示了这个错误，

例外：没有 NgFormModel 的提供者！(ControlMessages -> NgFormModel)

如果我NgFormModel在 ControlMessages 中包含作为提供者，则会显示此错误，

例外：TypeError：无法在 [errorMessage !== null in ControlMessages@0:5] 中读取 null 的属性“find”

请注意，在引导应用程序时我没有注入任何提供程序。
我正在使用angular2 beta 12。

编辑：

表格模板： 

<div class="form-group" 
     [class.has-error]="!registerForm.find('username').valid && registerForm.find('username').dirty">
  <label for="username">Username</label>
  <input type=text id="username" class="form-control" placeholder="username" 
         [ngFormControl]="registerForm.find('username')">
  <control-messages control="username"></control-messages>
</div>
4

1 回答 1

1

ControlMessages 组件嵌套在一个 div 中。这就是为什么它没有得到父对象。

表单模板应如下所示： 

<form [ngFormModel]="registerForm" (ngSubmit)="onSubmit()">

  <div class="form-group" 
       [class.has-error]="!registerForm.find('username').valid && registerForm.find('username').dirty">
    <label for="username">Username</label>
    <input type=text id="username" class="form-control" placeholder="username" 
           [ngFormControl]="registerForm.find('username')">
  </div>

  <control-messages control="username"></control-messages>

  <button type="submit" class="btn btn-primary"
          [disabled]="!registerForm.find('username').valid">Register</button>

</form>
于 2016-03-28T12:20:57.780 回答