Angular 2: Formular enthält untergeordnete Komponente

Question

Ich habe Komponente, die ein Formular und einige untergeordnete Komponenten innerhalb des Formulars hat. Die untergeordneten Komponenten werden mit *ngFor erstellt und jedes untergeordnete Element enthält input Elemente. Angular2 Compiler gibt Fehler wie [FormGroup] ist nicht definiert.

Ist diese Implementierung korrekt?

Geordnete Komponente:

<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> 

Kinder Komponente: 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. : Alle Importe sind gut, so bin ich mir ziemlich sicher, dass keine Importfehler hier

Answer 1

Dieses Verhalten wird erwartet. Winkelförmige Formulare werden nicht automatisch in der verschachtelten Komponente registriert. Sie können dies umgehen, indem Sie der untergeordneten Komponente die äußere FormGroup bereitstellen. Und innerhalb der untergeordneten Komponente wickeln Sie die Vorlage in derselben Gruppe ein. Hier ist, wie diese aussehen könnte:

/äußere Komponente Code - es enthält die Form/

@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') 
    }); 
} 

/Kind Komponentencode, das heißt my-comp/

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

Answer 2

Sie sagen, die Importe sind in Ordnung, aber die Fehler, die Sie bekommen, deuten darauf hin, dass sie wahrscheinlich nicht sind.

[formGroup] is not defined Fehler werden in der Regel durch eine fehlende
import { ReactiveFormsModule } from '@angular/forms' innerhalb des Moduls, wo Ihre Komponente deklariert verursacht.

Außerdem sollten Sie nicht [(ngModel)] innerhalb modellgesteuerter Formulare verwenden, sondern stattdessen auf [formGroup] und formControlName.