angular - 如何在angular8中对表单数组中的空字段应用验证

Question

我有一个表单数组。即使它是空的，它也会推送数据。我希望它仅在填充数据时推送表单数组数据，否则不推送它。我怎样才能做到这一点？

我的 component.html 代码

 <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>

• 我的 component.ts 文件*

     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)
  }
  

这是我的工作 stackblitz 演示 https://stackblitz.com/edit/angular-zmbu5t?file=src%2Fapp%2Fapp.component.ts

标签： angulartypescript

Answer 1

只添加这个

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

＆ 去掉它

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

这是工作。