Angular 2 формы - назначить ngControl на уровне подкомпонента

В форме Angular 2, Попытка получить данные через ngSubmit. Я могу присвоить свойства ngModel и ngControl в моем компоненте формы без проблем, однако в подкомпоненте MyInput я не могу назначить ngControl без "ошибки поставщика". Plunker здесь http://plnkr.co/edit/LauhEz6vMaEmIg0hceoj?p=preview

    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, MyInput],
template: ` <div>
                <form #hf="ngForm" (ngSubmit)="onSubmit(hf.value)">
                    <div>
                      In Form: <input type='text' [ngControl]="inform" [(ngModel)]="theValue" [required]="req" #spy >
                      <br>Classes: {{spy.className}}
                      <br>
                      <br>In Component: <my-input [props]='prop'></my-input>
                      <br>In Component: <my-input [props]='prop2'></my-input>
                    </div>
                    <button type="submit" [hidden] = "!editing">Save</button>
                    <button type="button" (click)="cancelClick()" [hidden] = "!editing">Cancel</button>
                    <button type="button" (click)="setEdit(true)" [hidden] = "editing">Edit</button>
                </form>
                Form Values {{data}}
           </div>
            `

Шаблон субкомпонента:

@Component({
selector: 'my-input',
directives: [FORM_DIRECTIVES],
template: ` 
            <input type='text'
              [(ngModel)]="props.Value"

Ошибка, если я добавлю это

 [ngControl]="props.id"

Есть ли что-то, что мне нужно передать Sub Component из формы?

Ответ 1

Разве это не проблема в том, что prop не доступен во время привязки/выполнения ngControl... что, если вы предоставили элемент управления по умолчанию в компоненте, а затем сделаете повторение с тем из props в ngOnChange, который выполняется в то время, когда реквизит действительно доступен.

Ответ 2

UPDATE:. Используя этот метод, родительская форма не имеет возможности из коробки, чтобы определить ее достоверность на основе действительности подкомпонентов.

В качестве обходного пути вы можете попробовать обернуть подкомпонент в свой собственный элемент формы.

@Component({
  selector: 'my-input',
  directives: [FORM_DIRECTIVES],
  template: ` 
      <form> <--------------
        <input type='text'
          [(ngModel)]="props.Value"
          [ngControl]="props.id"  />
      </form>

Не идеально, но это единственный способ создать форму с субкомпонентами без использования динамических форм https://angular.io/docs/ts/latest/cookbook/dynamic-form.html