I need some help on how to think about this problem..
I have checkout component that just init's a form (public cartForm = new FormGroup({});
) and have child components that uses ControlValueAccessors... so the form structure becomes
-checkout
--address
--articles(array)
---article (each looped item)
the address/costCenter stuff are working.. but in the articles component I have a ngFor for each item and now I need to add a control but this is where I'm stuck...
// Parent Component
<form [formGroup]="cartForm">
<ssp-checkout-articles-list [articles]="cart.articles"></ssp-checkout-articles-list>
<!-- <ssp-delivery-address></ssp-delivery-address> -->
<!-- <ssp-cost-center></ssp-cost-center> -->
<div fxLayout="row" fxLayoutAlign="end center">
<button mat-button type="submit" [disabled]="!cartForm.valid">Place Order</button>
</div>
</form>
// The list
<ng-container formArrayName="articles">
<ssp-checkout-article
*ngFor="let article of articles"
[article]="article"
fxLayout="row"
></ssp-checkout-article>
</ng-container>
// TS
this.articlesForm = this.parent.form;
this.articlesForm.addControl('articles', new FormArray([]));
this.articles.forEach((article) => {
(this.articlesForm.get('articles') as FormArray).push(
new FormGroup({
article: new FormGroup({
approved: new FormControl(false, [Validators.requiredTrue])
})
})
);
});
// The article component
<ng-container [formGroup]="articleForm">
<div class="article" fxLayout="row">
<div class="info" fxLayout="column">
<div
class="mat-h4 name">
</div>
<div class="terms">
<mat-checkbox color="primary">approve</mat-checkbox>
</div>
</div>
</div>
</ng-container>
// TS
this.articleForm.addControl('article', new FormControl(new FormGroup({
article: new FormGroup({
approved: new FormControl(false, [Validators.requiredTrue])
})
})));
from Reactive Forms using ControlValueAccessors and *ngFor
No comments:
Post a Comment