Angular Async custom validator for formArray

Question

I have a form that has dynamic fields of amount for which I am using formArray. The user can generate multiple fields of the amount.

What I want is to calculate the total values in all dynamic fields and show an error message if the total amount is exceeded.

The problem is when I looped over the FormArray with value change and then returned a promise on resolve but it only shows the validation error for the first field. Below is the StackBlitz. You can see it in the console. When you type some number that exceeds the total it will show error for the first field. For the rest, if you exceed the total it doesn't show an error. https://stackblitz.com/edit/angular-sbidt3

Questions that include code must include the code in the question itself. While off site code is sometimes great for debugging, if the link becomes invalid, so does the question. — Erik Philips
– Erik Philips, Commented Nov 10, 2019 at 17:59
Your code does actually show errors for other fields but only if you enter the values after the first field is in an error state. — Dan
– Dan, Commented Nov 10, 2019 at 18:40

MoxxiManagarm · Accepted Answer · 2019-11-10 18:33:19Z

2

You shouldn't use valueChanges. What you are actually looking for is cross-form-validation.

Read about it, e.g.: https://medium.com/@realTomaszKula/angular-cross-field-validation-d94e0d063b61 https://angular.io/guide/form-validation

Bind the validator to the form

Edited:

Component

  biddingForm: FormGroup;

  constructor( private _formBuilder: FormBuilder,) { }

  ngOnInit() {
    this.biddingForm = this._formBuilder.group({
      bidding: this._formBuilder.array([]),
    }, { validator: this.amountValidator });

    this.addBet();
  }

  addBet(){
    this.bidding.push(
      this._formBuilder.control(0),
    );
  }

  get bidding(){
    return <FormArray>this.biddingForm.controls.bidding;
  }

  amountValidator(fg: FormGroup) {
    const values: number[] = (fg.controls.bidding as FormArray).controls.map(
      (control: FormControl) => +control.value, 
    );

    const amount = values.reduce((sum, v) => sum + v, 0);

    return amount <= 50 ? null : { amount: true };
  };

Template

<form [formGroup]="biddingForm">
  <div formArrayName="bidding">
    <div class="col-75" *ngFor="let bet of bidding.controls; let i = index;">
        <input [formControlName]="i" type="text"  required > 
        <div *ngIf="biddingForm.hasError('amount')">
          Maxmimum amount reached
        </div>
      </div>
  </div>
  <button (click)="addBet()">Add</button>
</form>

edited Nov 10, 2019 at 18:33

answered Nov 10, 2019 at 18:04

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr Khan Over a year ago

kindly see the stackblitz and fix the issue. I have been trying this for ages.

Mr Khan Over a year ago

hey moxxi i want to show the error messages on individual fields check the stackblitz i have updated it stackblitz.com/edit/…

Collectives™ on Stack Overflow

Angular Async custom validator for formArray

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related