Angular reactive forms custom validator. Enable Validation only when checkbox checked

Question

I have a problem validating the checkbox that are marked only. At first, when the component is initialize and all checkbox are disabled, if they click the save button it should output a validation that says you didn't click any checkbox. Second validation is when you have mark a checkbox but you didn't enter any quantity, it should only mark that "This field is required". Now however, when i click the save button, all quantity even though is disabled, the error "This field is required" is appearing. How can i solve this? Please also my commented functions, maybe this will help. Thanks.

Please click here for my stackblitz link : CODE LINK

patchValues() {
    let rows = this.myForm.get('rows') as FormArray;
    this.orders.forEach(material => {
      material.materials.forEach(x => {
        rows.push(this.fb.group({
          checkbox_value: [null],
          material_id: new FormControl({ value: x.id, disabled: true }, Validators.required),
          material_name: x.name,
          quantity: [null]
        }));
        // this.formArrayLength++;
      });
    });
  }

Kliment Ru · Accepted Answer · 2018-09-17 15:33:41Z

1

You need to create custom validators for you form and subforms in array.

For form its valid when one of checkboxes checked. And looks like

formValidator(control: AbstractControl): { [key: string]: any } {
   return control.value.rows.some(i => i.checkbox_value) ? null : { 'checkboxReq': 'Some checkbox field is required' }
}

Add it to you form

this.myForm.setValidators([this.formValidator.bind(this)])

In template you can get it with myForm.getError('checkboxReq')

<small class="form-text text-muted danger">{{myForm.getError('checkboxReq')}}</small>

For subform need another validator

subFormValidator(control: AbstractControl): { [key: string]: any } {
   return control.value.checkbox_value ? { 'req': 'This field is required' } : null
}

Add it when you init you subForm

(this.fb.group({
      checkbox_value: [null],
      material_id: [{ value: x.id, disabled: true }],
      material_name: x.name,
      quantity: [null]
    }, [this.subFormValidator.bind(this)]));

Template

<small class="form-text text-muted danger" *ngIf="row.invalid && row.touched">This field is required</small>

stackblitz example with changes

answered Sep 17, 2018 at 15:33

Kliment Ru

2,13716 silver badges16 bronze badges

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

5 Comments

Joseph Over a year ago

Hi and thank you for this. I have a problem with my patchValues function. Can you not change my patchValues since on my own app it says this.data.reduce is not a function. Can you return to how my patchValues would be? Thank you

Kliment Ru Over a year ago

reduce is default array method (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) i use because i want to flat inner array. If you dont have inner array just remove reduce. Useing reduce and map is better than use forEach and push.

Joseph Over a year ago

and also i have implemented my custom validator that says quantity should not more than available quantity and i don't know how i can combine it with your custom validator. Can you help with that. Check this stackblitz.com/edit/…

Kliment Ru Over a year ago

Validators added in array. Just add you validator after my [this.formValidator.bind(this), this.anotherFormValidator.bind(this)]

Joseph Over a year ago

Hello did you get it?

Collectives™ on Stack Overflow

Angular reactive forms custom validator. Enable Validation only when checkbox checked

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related