Getting error in validation while submitting the form in angular

I have a form, inside the form i have following fields: name (textbox), id(textbox) type(textbox), category(dropdown) I'm showing a textbox on selecting the dropdown option with value "3". And when i click on add new text field after selection of dropdown with value "3", I'm calling a form array, where i get multiple textboxes.

I updated my code for reference in Stackblitz :

https://stackblitz.com/edit/angular-ivy-vlvbqz?file=src%2Fapp%2Fapp.component.ts

<form [formGroup]="addForm" (ngSubmit)="onSubmit()">
                   
                          <input type="text" class="form-control" placeholder="enter term"
                          formControlName="name">   
                          <small class="errormessage" *ngIf="submitted && addForm.controls.name.hasError('required')">
                            Term is required
                          </small>
                
                        <input type="text" class="form-control" placeholder="Enter Id"
                        formControlName="id">   
            
<small class="errormessage" *ngIf="submitted && addForm.controls.id.hasError('required')">
                            id is required 
                        </small>
                        
                        <input type="text" class="form-control" placeholder="Type" formControlName="type">
<small class="errormessage" *ngIf="submitted && addForm.controls.type.hasError('required')">
                            type is required 
                        </small>
                                      

                        <select class="Dropdown" formControlName="category" [(ngModel)]="optionValue">
                            <option value="undefined" selected disabled >Select Category</option>
                            <option  *ngFor="let list of dropdownitems" [value]="list.id" >{{list.name}}</option>
                        </select> 

                        <small class="errormessage" *ngIf="submitted && addForm.controls.category.hasError('required')">
                            Category is required 
                        </small>


                    <ng-container *ngIf="optionValue == '3'">
                                               
                          <input type="text" formControlName="listItem" class="form-control" placeholder="enter dropdownlist items"> 
                        <small class="errormessage" *ngIf="submitted && addForm.controls.listItem.hasError('required')">
                            Category is required 
                        </small>
                          <a (click)="addGroup()">Add New Textfield</a>

                    </ng-container>
                    
                     <span formArrayName="times" *ngFor="let time of addForm.controls.times?.value; let i = index;">                          
                      <span [formGroupName]="i">                         
                            <input type="text" class="form-control" formControlName="lists" placeholder="enter dropdown options">  

                      </span>
                     <a(click)="removeGroup(i)">Remove Textfield</a>
                     </span>                   
                     
                          <input type="Submit" class="savebtn" Value="Save" Style="width: 100px;"/>&nbsp;
 
                  </form>

In ts i'm validating all the fields. onSubmit() function, if the form is invalid i'm showing an alert. Right now, when i submit the form without selecting the dropdown option as "3". (means my form doesn't show list item textfield). and even if i give name, id, type and select dropdown value as 1, even without selecting 3. It, should not show form invalid. But,i'm getting form invalid eventhough there is no new textbox in my form (as i didn't select 3).

Please correct my code and help me achieve this functionality.

 ngOnInit(): void {
    this.addForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.pattern('[a-zA-Z# ]*')]],
      id:  ['', [Validators.required]],
      type:  ['', [Validators.required]],
      category: ['', [Validators.required]],
      listItem: ['', [Validators.required]],
      times: this.formBuilder.array([])
      }); 
    console.log(this.addForm.value);
  }

public dropdownitems = [{
    name: "A",
    id: 1
  },{
    name: "B",
    id: 2
  },{
    name: "B",
    id: 3   
  },{
    name: "D",
    id: 4    
  }]

  onSubmit(){
    this.submitted = true;
    if (this.addForm.invalid) {
      alert ('Please fill up complete details');
      return;
    }
    console.log(this.addForm.value);   
}


value = this.formBuilder.group({
  lists: ['', Validators.required],
});


addGroup() {
  const val = this.formBuilder.group({
    lists: ['', Validators.required],
  });
  const form = this.addForm.get('times') as FormArray;
  form.push(val);
}

removeGroup(index) {
  const form = this.addForm.get('times') as FormArray;
  form.removeAt(index);
}

}