Clash Royale CLAN TAG#URR8PPP

Show Error if Total Min Value Is Not Equal to Max Value

I need to show the error if the total min value is not equal to the total max value. How will i able to do it? Here's my code and the link below PLEASE CLICK THIS LINK

this.total$ = this.inquiryForm.valueChanges.pipe(
startWith(this.inquiryForm.value),
map(f => f.rows.reduce(
(acc, q) =>
(
min: +acc.min + +q.min,
max: +acc.max + +q.max
),
min: 0, max: 0
))
);


2 Answers
2

You should simply be able to add a boolean property to the component and tap() the calculated total to set the value:

tap()

in public property section, add:

minEqualsMax = true;


In ngOnInit():

ngOnInit()

this.total$ = this.inquiryForm.valueChanges.pipe(
startWith(this.inquiryForm.value),
map(f => f.rows.reduce(
(acc, q) =>
(
min: +acc.min + +q.min,
max: +acc.max + +q.max
),
min: 0, max: 0
)),
tap(total => this.minEqualsMax = total.min === total.max; ),
);


Then it's simply a matter of adding your message to the template with a *ngIf="!minEqualsMax"

*ngIf="!minEqualsMax"

However, this will not stop the form submit as nothing is added to the form validation. If you need that, I'd suggest writing a custom validator function which iterates the rows FormArray to calculate values and return an appropriate error if their sums aren't equal.

rows

A custom validator could be as simple as:

const MinEqualsMaxValidator: ValidatorFn = (array: FormArray): [key: string]: boolean =>

const total = array.value
.reduce((total, val) => (total.min+=+val.min, total.max+=+val.max, total), min:0,max:0)
const valid = total.min === total.max;

return valid ? null : minEqualMax: true ;
;


Add this into the form by including it as a second argument when building the rows FormGroup: ie rows: formBuilder.group(, MinEqualsMaxValidator).

rows

rows: formBuilder.group(, MinEqualsMaxValidator)

Then you can include an error message in the form using something like this (to be added to the bottom of your current table):

<tr *ngIf="inquiryForm.rows.invalid && (inquiryForm.controls.rows.dirty || inquiryForm.controls.rows.touched || inquiryForm.submitted)">
<td colspan="4">
Validation Error!
<div *ngIf="inquiryForm.controls.rows.errors.minEqualMax">Error: min does not equal max!</div>
</td>
</tr>


I hope this helps!

tap

I just change Total$ to normal property total = max:0,min:0; and create a method to check the state of the total

total = max:0,min:0;

total

this.inquiryForm.valueChanges.subscribe(f =>
this.total = f.rows.reduce(
(acc, q) =>
(
min: +acc.min + +q.min,
max: +acc.max + +q.max
));
)


isTotalNotValid method

isTotalNotValid(): boolean total.min > 0)
return total.min === total.max ? true : false;
else
return false;




template

<td colspan="3" class="error">isTotalNotValid() ? 'Max and min can't be equal' : ''</td>


and you can use isTotalNotValid to disable save button

<button type="submit" [disabled]="!inquiryForm.valid || !inquiryForm.controls.rows.length || isTotalNotValid()">Save</button>


stackblitz demo

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.