how to apply validations for empty field in form array in angular8

Question

I have a form array. It pushes data even if it is empty. I want that it pushes form array data only when it has data filled otherwise not push it. How can i achieve this??

my component.html code

 <form [formGroup]="addContainerForm" 
     (ngSubmit)="addAnalyticsSubmit(addContainerForm.value)">
   <div id="vol" class="container tab-pane fade">
          <div class="addButton">
            <button (click)="addVolume()" class="a-btns btn btn- 
     success tab-btn">
              <span><i class="fa fa-plus" aria-hidden="true"></i> 
         </span>&nbsp; Map 
            Additional Volume
            </button>
          </div>
          <div formArrayName="Volumes" class="form_array" *ngFor="
              let a of addContainerForm.get('Volumes') 
        ['controls'];
              let volumeChildForm = index
            ">
            <div [formGroupName]="volumeChildForm">
              <div class="form-group row">
                <label class="col-sm-2 col-form- 
              label">Host</label>

                <div class="col-sm-10 txt-box">
                  <input type="text" formControlName="Host" 
            class="form-control"
                    placeholder="Enter Host Name" />
                </div>
              </div>
              <div class="form-group row">
                <label class="col-sm-2 col-form- 
         label">Container</label>
                <div class="col-sm-9 txt-box">
                  <input type="text" formControlName="Container" 
          class="form-control"
                    placeholder="Enter Container Name" />
                </div>
                <div class="col-md-1">
                  <button type="button" class="a-btns btn btn- 
              success tab-btn"
                    (click)="deleteVolume(volumeChildForm)">
                    <i class="fa fa-trash" aria- 
            hidden="true">delete</i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
         <button class="a-btns btn btn-success tab-btn" 
      type="submit">
        Submit
      </button>
        </form>

• my component.ts file*

     ngOnInit(): void {
     this.addContainerForm = this.formbuilder.group({
      Volumes: this.formbuilder.array([], [Validators.required])
       })
     }
    addVolume() {
    const arr = this.addContainerForm.controls.Volumes as FormArray;
  
    arr.push(
    this.formbuilder.group({
    Host: [""],
    Container: [""],
    })
    );
   }
    deleteVolume(index) {
   const arr1 = this.addContainerForm.controls.Volumes as FormArray;
   arr1.removeAt(index);
   }
  ngSubmit(v){
   console.log(v)
  }
  

here is my working stackblitz demo https://stackblitz.com/edit/angular-zmbu5t?file=src%2Fapp%2Fapp.component.ts

Answer 1

only add this

 arr.push(
  this.formbuilder.group({
  Host: ["", [Validators.required]],
  Container: ["", [Validators.required]],
  })

& remove it

 arr.push(
  this.formbuilder.group({
  Host: [""],
  Container: [""],
  })
  );

its work.