Angular 2: Форма, содержащая дочерний компонент

У меня есть компонент, который имеет форму и некоторые дочерние компоненты в форме. Детальные компоненты создаются с помощью *ngFor, и каждый дочерний элемент содержит элементы input. Angular2 компилятор дает такие ошибки, как [formGroup] не определен.

Правильно ли эта реализация?

Родительский компонент:

<section class="data-body">
        <form [formGroup]="checkoutForm" novalidate>
            <app-checkout-product-view *ngFor="let item of checkoutData.products" [_product]="item" formGroupName="products"></app-checkout-product-view>
                <div class="col-md-4">
                    <label>Nominee:</label>
                    <select required [(ngModel)]="checkoutData.selectedNominee" [ngModelOptions]="{standalone: true}">
                        <option *ngFor="let nominee of checkoutData.nomineeList" [value]="nominee">{{nominee}}</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label>Bank Account:</label>
                    <select [(ngModel)]="checkoutData.selectedBank" required [ngModelOptions]="{standalone: true}">
                        <option *ngFor="let bank of checkoutData.bankList" [value]="bank">{{bank}}</option>
                    </select>
                </div>
            </div>
        </form>
    </section>

Детский компонент: app-checkout-product-view

<div class="row">
    <div class="col-md-4">
        <md-input required [(ngModel)]="product.investmentAmount 
                  formControlName="investmentAmount">
            <span md-prefix>&#x20B9;</span><!--Rupee icon-->
        </md-input>
    </div>
</div>

P.S.: Все импортные штрафы, поэтому я уверен, что здесь нет ошибок импорта.

Ответ 1

Ожидается такое поведение. Angular формы не регистрируются автоматически во внутреннем вложенном компоненте. Однако вы можете обойти это, предоставив внешнюю FormGroup дочернему компоненту. И внутри дочернего компонента оберните шаблон внутри той же группы. Вот как это выглядит:

/внешний код компонента - он содержит форму /

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="reactiveFormGroup">
      <input formControlName="foo" />
      <my-comp **[group]="reactiveFormGroup"**></my-comp>
    </form>

    form value: {{ reactiveFormGroup.value | json }}
  `
})
export class AppComponent { 
  reactiveFormGroup = new FormGroup({
    foo: new FormControl('default foo'),
    bar: new FormControl('default bar')
  });
}

/код дочернего компонента, то есть my-comp/

@Component({
  selector: 'my-comp',
  template: `
    <div [formGroup]="group">
      <input   [formControlName]="'bar'" />
    </div>
  `
})
export class MyComponent { 
  @Input() group: FormGroup;
}

Ответ 2

Вы говорите, что импорт прекрасен, но ошибки, которые вы получаете, показывают, что они, вероятно, не являются.

Ошибки

[formGroup] is not defined обычно вызваны отсутствующим import { ReactiveFormsModule } from '@angular/forms' внутри модуля, где объявлен ваш компонент.

Кроме того, вы не должны использовать [(ngModel)] внутри управляемых моделью форм, но вместо этого полагаться на [formGroup] и formControlName.