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

0
votes

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

1
angulartypescript
The stackblitz gives various errors because your submit function is not present. Could you fix this first? However, you can get the value of a form by formGroup.value, then you could loop the values in that object and only push the changes if it's not equal to "". - Ruben Szekér
Add a required validation and when submit check if the form is valid. - hansand

1 Answers

1
votes

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.