Angular 2:包含子组件的表单
[英] Angular 2: Form containing child component
本文介绍了Angular 2:包含子组件的表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个组件，它有一个表单和表单中的一些子组件.子组件是使用 *ngFor 创建的，每个子组件都包含 input 元素.Angular2 编译器给出类似 [formGroup] 未定义的错误.
这个实现是否正确?
父组件:
<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>提名人:</label><select required [(ngModel)]="checkoutData.selectedNominee" [ngModelOptions]="{standalone: true}"><option *ngFor="let nominee of checkoutData.nomineeList" [value]="nominee">{{nominee}}</option></选择>
<div class="col-md-4"><label>银行账户:</label><select [(ngModel)]="checkoutData.selectedBank" required [ngModelOptions]="{standalone: true}"><option *ngFor="let bank of checkoutData.bankList" [value]="bank">{{bank}}</option></选择>
</表单></节>
子组件:app-checkout-product-view
<div class="col-md-4"><md-input required [(ngModel)]="product.investmentAmountformControlName="investmentAmount"><span md-prefix>₹</span><!--卢比图标--></md-input>
附言: 所有的导入都很好，所以我很确定这里没有导入错误
解决方案
这种行为是正常的.在嵌套组件内部时，Angular 表单不会自动注册.但是，您可以通过向子组件提供外部 FormGroup 来解决此问题.在子组件内部，将模板包装在同一个组中.这可能是这样的:
/外部组件代码 - 它包含表单/
@Component({选择器:'我的应用'，模板:`<form [formGroup]="reactiveFormGroup"><input formControlName="foo"/><my-comp **[group]="reactiveFormGroup"**></my-comp></表单>表单值:{{reactiveFormGroup.value |json }}`})导出类 AppComponent {reactFormGroup = new FormGroup({foo: new FormControl('default foo'),bar: new FormControl('默认栏')});}
/child 组件代码，即 my-comp/
@Component({选择器:'my-comp'，模板:`<div [formGroup]="group"><input [formControlName]="'bar'"/>
`})导出类 MyComponent {@Input() 组:FormGroup；}
I have component which has a form and some child components within the form. The child components are created using *ngFor and each child contains input elements. Angular2 compiler is giving errors like [formGroup] is not defined.
Is this implementation a correct?
Parent Component:
<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>
Child Component: app-checkout-product-view
<div class="row">
<div class="col-md-4">
<md-input required [(ngModel)]="product.investmentAmount
formControlName="investmentAmount">
<span md-prefix>₹</span><!--Rupee icon-->
</md-input>
</div>
</div>
P.S. : All the imports are fine so I am pretty sure that no import errors here
解决方案
This behavior is expected. Angular forms are not automatically registered when inside nested component. However you can workaround this by providing the outer FormGroup to the child component. And inside the child component wrap the template inside that same group. Here is how this might look:
/outer component code - it contains the 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')
});
}
/child component code, i.e my-comp/
@Component({
selector: 'my-comp',
template: `
<div [formGroup]="group">
<input [formControlName]="'bar'" />
</div>
`
})
export class MyComponent {
@Input() group: FormGroup;
}
这篇关于Angular 2:包含子组件的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
