angular - Allow Input Quantity Based On Available Quantity in Reactive Forms

Question

I need help in my problem since i need to input only the quantity based on the available quantity on my rows? How can i only submit the button if this requirement is met? How can i check for this? Here's the link LINK CODES

initGroup() {
    let rows = this.addForm.get('rows') as FormArray;
    rows.push(this.fb.group({
      ingredient_id: ['', Validators.required],
      qty_available: new FormControl({ value: '', disabled: true }, Validators.required),
      qty: ['', Validators.required]
    }))
  }

Answer 1

//when push the fbgroup, add a customValidator

rows.push(this.fb.group({
      ingredient_id: ['', Validators.required],
      qty_available: new FormControl({ value: '', disabled: true }, Validators.required),
      qty: ['', Validators.required]
    },{validator: this.customValidator('qty_available','qty')}
    ))

//the customValidator function can be in your app.component.ts
//It's work because the validator is "attached" to the FbGroup, not to the all form

customValidator(campo1:string,campo2:string) {
  return (group: FormGroup): {[key: string]: any} => {
    const available = group.controls[campo1];
    const qty=group.controls[campo2]
    if(available.value<qty.value){  //if error return "something" 
      return {
        out: true //<--THIS
      };
    }
  }
}