conditional validation of Angular reactive forms

Question

I am new to angular and working on reactive form.

I have a html table in which by looping through I have generated controls

I want to add validation based on following cases

When this page loads than by default Save button should be disabled( which I have achieved by used [disabled]="!myform.valid"
Save button should enable only when user enter value in any of text boxes or select check box in that particular row. Checkbox select and add value in text box should not allow to user. Either checkbox should be selected or user can enter value in any of text-boxes.

I tried this to achieve

IsFormValid(){return (!!this.myfm.get('myform').value);}// but this returning always true.

Here it my code

    myfm:FormGroup;
  ngOnInit() {
  debugger;
  this.myfm = this.fb.group({
  myform: this.fb.array([this.addformFileds()])
  }); 
}

 addformFileds(): FormGroup {
  return this.fb.group({
  NoTask: ['', Validators.required],// only check box is required either checkbox should click 
 or enter value in any text-boxes
                                    
  task1: ['', null],    
  task2: ['', null],
  task3: ['', null],
  task4: ['', null],
  task5: ['', null],
  task6: ['', null],
  task7: ['', null],
  task8: ['', null],
  task9: ['', null],
  task10: ['', null],
  task11: ['', null],
  task12: ['', null] 
});
}

 //adding more rows on click of Add More Rows button
addEntried():void{
this.idAddNewRow=true; //indicator that new rows is being created 
(this.myfm.get('myform')).push(this.addEntried());
}

I know if is bit tricky but still didn't get solution for this. Any help of this will very helpful for me.

My component.html code

 
        
         
          
        
               
   
            
      
          Imp Task Details
           
          
             
             
            No Task
            Task 1
            Task 2
            Task 3
            Task 4
            Task 5
            Task 6
            Task 7
            Task 8
            Task 9
            Task 10
            Task 11
            Task 12 
       
          
        
        
          
            
            
             
            
            
            
            
            
            
            
            
            
            
            
              
          
           
        
     
  
        
          
           
           
        
      
    


**component.ts** file code
SaveImpDetails(){
   this.baseSrvc.post(ApiResource.SaveImpDetails, 
    JSON.stringify(body)).subscribe((result=>{
if(result){
   this.alertService.showMessage("Success!", "Details has been 
    recorded 
    successfuly.")
 }if(result.isError){
 this.alert.showMessage("Error!! while saving details");
}
  }));
   }

Ashot Aleqsanyan · Accepted Answer

Update:

After understanding the whole question, we could resolve it by adding a new validator to each form item.

Here is the reproduction example(You can see the same on the Stackblitz):

  myfm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() { this._generateForm(); }

  private _generateForm() {
    this.myfm = this.fb.group({
      myform: this.fb.array([this.addformFileds()]),
    });
  }

  addformFileds(): FormGroup {
    return this.fb.group(
      {
        NoTask: '',
        task1: '',
        task2: '',
        task3: '',
        task4: '',
        task5: '',
        task6: '',
        task7: '',
        task8: '',
        task9: '',
        task10: '',
        task11: '',
        task12: '',
      },
      { validator: [validateRow()] }
    );
  }

and the helper function and validator


function validateRow(): ValidatorFn {
  const pairs: string[][] = [
    ['task1', 'task2'],
    ['task3', 'task4'],
    ['task5', 'task6'],
    ['task7', 'task8'],
    ['task9', 'task10'],
    ['task11', 'task12'],
  ];
  return (group: FormGroup): ValidationErrors | null => {
    if (group.get('NoTask').value) {
      return null;
    }

    // check the pair validities
    const invalidPair = pairs.find((pair) => {
      const firstTask = group.get(pair[0]).value;
      const secondTask = group.get(pair[1]).value;

      if ((firstTask && !secondTask) || (!firstTask && secondTask)) {
        return true;
      }

      return false;
    });

    // return pair validity error object
    if (invalidPair) {
      return { invalidPair };
    }

    if (!singleWhere(group, (item) => item.value)) {
      return {invalidRow: true};
    }

    return null;
  };
}

/**
 * find and return the first control for which
 * the `callback` function returns `true`
 *
 * loop over the `group` controls
 * and return the `control`
 * if the `callback` function returns `true` for the `control`
 *
 * @param group - is the form
 * @param callback - is the callback function
 *
 * @return `AbstractControl`
 */
 function singleWhere(
  group: AbstractControl,
  callback: (control: AbstractControl, index: number) => boolean
): AbstractControl {
  if (!group) {
    return null;
  }
  if (group instanceof FormControl) {
    return callback(group, 0) ? group : null;
  }

  const keys = Object.keys((group as FormGroup).controls);

  for (let i = 0; i < keys.length; i++) {
    const control = group?.get(keys[i]);

    if (singleWhere(control, callback)) {
      return group;
    }
  }

  return null;
}

And finally, in the template, add disable attribute by this condition

[disabled]="myfm.invalid || myfm.untouched"

Here is the reproduction example https://stackblitz.com/edit/angular-bootstrap-4-starter-vvimke?file=src/app/app.component.ts

conditional validation of Angular reactive forms

Answers (2)

Related Questions