Monday, 21 September 2020

Reactive Forms using ControlValueAccessors and *ngFor

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