Angular 2：包含子組件的表單

我有一個組件，它有一個窗體和表單中的一些子組件。子組件使用*ngFor創建，每個子組件包含input個元素。 Angular2編譯器給出的錯誤類似[formGroup]沒有定義。Angular 2：包含子組件的表單

此實現是否正確？

父組件：

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

附：：所有的進口都很好，所以我很確定這裏沒有進口錯誤

來源

2016-10-21 Sumit Agarwal

此行爲是預期的。嵌套組件內部不會自動註冊角度表單。但是，您可以通過將外部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') 
    }); 
}

/子組件的代碼，也就是我的-COMP/

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

來源

2016-11-13 19:05:12 rusev

還有一篇最近的博客文章也是這樣的例子。你可以在這裏找到它：https：//toddmotto.com/component-architecture-reactive-forms-angular – DeborahK

你說的是進口很好，但是你得到的錯誤表明他們可能不是。

[formGroup] is not defined錯誤通常是由聲明組件的模塊內缺少的
import { ReactiveFormsModule } from '@angular/forms'造成的。

除此之外，您不應該在模型驅動的表單中使用[(ngModel)]，而應該使用[formGroup]和formControlName。

來源

2016-10-21 08:59:05 Siri0S

這些都是我進口'進口{FormGroup，FormBuilder，Validators} from「@ angular/forms」;' –

其次，可以在表單中包含子組件嗎？ –

這些是您在組件類中需要的輸入。但該組件必須在模塊內部聲明。在該模塊內部，需要註冊_ ** ReactiveFormsModule ** _作爲'imports：[]'數組中的一個導入。 – Siri0S

Angular 2：包含子組件的表單

回答

相關問題