Angular/typescript how to make 2 out of 4 input fields required

Question

design decisions sub systems waarom frameworks library's

hello! im am quite new to angular and have encountered a problem which I cant seem to solve in a proper way, meaning I could make a really long and big if statement but then I wouldnt learn anything from it. The problem is that I have a big form which can be devided in 4 sections every section has 5 input fields. in order to go to the next web page I want to require that you have completely filled in 2 or more sections.

I tried the following

tabel11: new FormGroup({
        tabel11A: this.tabel11A,
        tabel11B: this.tabel11B,
        tabel11C: this.tabel11C,
        tabel11D: this.tabel11D,
        tabel11E: this.tabel11E
      })

if(this.inputTabelForm.get('tabel9').valid){
      i+= 1;
    }
    if(this.inputTabelForm.get('tabel10').valid){
      i+= 1;
    }
    if(this.inputTabelForm.get('tabel11').valid){
      i+= 1;
    }
    if(i >= 2){
      return true;
    }

it seems that when nothing is filled in so when all fields are NULL they are still perceived as valid which is making it a lot more complicated to me. If someone knows how you are supposed to solve this it would be great!

Answer 1

When checking this.inputTabelFrom.get('tabelx') you are checking the whole subtable as an object and not all specific instances of the subtable. If you want to check whether all the inputs in one of the subforms are filled in, you will have to check all inputs of that subform. For more information on form validation with Angular, please check this.