[英]Angular 2 child component can't get parent component
我正在尝试制作一个组件, 该组件将显示给定控件输入名称的特定错误消息。 这是我的代码...
注册.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;
}
}
问题是你可以看到ControlMessages
无法获得我的父NgFormModel
的值。
Angular 2 向我展示了这个错误,
例外:NgFormModel 没有提供程序! (ControlMessages -> NgFormModel)
如果我将NgFormModel
作为提供程序包含在 ControlMessages 中,则会显示此错误,
例外:类型错误:无法在 [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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.