Formarray：仅当所选文本字段不为空时，才添加新文本字段。并且无法在formarray文本框中键入多个字母

我有一个表单，在表单内部，我有以下字段：名称（文本框），id（文本框），类型（文本框），类别（下拉列表）我正在显示一个选择值为“ 3”的下拉列表框的文本框。当我在选择值为“ 3”的下拉列表后单击添加新文本字段时，我正在调用一个表单数组，在该数组中我得到了多个文本框。一切正常。但是我有一个问题：

我只想在所选字段不为空的情况下添加新的文本字段。也就是说，如果“ listItem”文本框为空，并且当我单击“ addnew textfield”时，它将显示警报。并且所有文本字段都类似。

我无法在formarray字段中键入多个字母。

请帮助我解决问题。提前致谢。

Stackblitz中的更新代码：https ://stackblitz.com/edit/angular-ivy-3i6ggx ? file = src%2Fapp%2Fapp.component.html

<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">
                            <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="showOptions">
                                               
                          <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>

export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  addForm: FormGroup;
  submitted = false;
  showOptions: any;

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


 constructor(
    private formBuilder: FormBuilder,
    ) { }

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

      this.addForm.get("category").valueChanges.subscribe((category) => {
        
    if(category === '3') {
      this.showOptions = true;
         this.addForm.get("listItem").enable();
    } else {
      this.showOptions = false;
         this.addForm.get("listItem").disable();
    }
});

  }

  onSubmit(){
     //   console.log(this.addForm.controls['category'].value)
    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);
}



}