Дочерний компонент Angular 2 не может получить родительский компонент

Я пытаюсь создать компонент, который будет отображать конкретные сообщения об ошибках с указанием имен управляющих входов. Вот мои коды ...

register.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]
})

control-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, он покажет мне эту ошибку,

ИСКЛЮЧЕНИЕ: TypeError: Невозможно прочитать свойство 'find' со значением null в [errorMessage! == null в ControlMessages @ 0: 5]

Обратите внимание, что я не вводил никаких поставщиков при начальной загрузке приложения.
Я использую 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>

angular angular2-forms angular2-directives angular2-formbuilder
person rakeen    schedule 28.03.2016    source источник
comment
вы ввели FORM_PROVIDERS в функцию начальной загрузки?   -  person micronyks    schedule 28.03.2016
comment
Не могли бы вы добавить еще код (RegistrationForm класс, шаблоны)   -  person Günter Zöchbauer    schedule 28.03.2016
comment
Компонент ControlMessages был вложен в div. Вот почему у него не было родительского объекта.   -  person rakeen    schedule 28.03.2016

Ответы (1)


arrow_upward
1
arrow_downward

Компонент 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>
person rakeen    schedule 28.03.2016
comment
Привет @anon. Прежде чем продолжить и создать новый вопрос, я подумал, что сначала попробую здесь: * q1: где вы предоставляете NgFormModel? в начальной загрузке, или в ControlMessages, или в обоих? * q2: знаете ли вы, как получить действительный экземпляр NgFormModel с ненулевым .form, когда компонент вложен внутри ‹div›? - person superjos; 31.05.2016