提交表单时出现验证错误

Question

我有一个表格，在表格里面 我在选择下拉菜单时显示一个文本框 我正在调用一个表单数组，在那里我得到了多个文本框。 当我提交时，即使我为所有字段提供值，我的表单也显示无效。

  
           
                        
                        <input type="text" class="form-control" placeholder="Type" formControlName="type">                                      

                        <select class="Dropdown" formControlName="category" >
                            <option >Select Category</option>
                            <option  *ngFor="let list of dropdownitems" [value]="list.id" >{{list.name}}</option>
                        </select> 

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

在 ts 中，我正在验证所有字段。 onSubmit() 函数，如果表单无效，我将显示警报。 请更正我的代码并帮助我实现此功能。

 ngOnInit(): void {
    this.addForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.pattern('[a-zA-Z# ]*')]],
      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);
}

}

Answer 1

问题在于，即使这些字段隐藏在模板中 (HTML)，它们在表单中也被定义为 required。

您需要有条件地添加和删除表单字段，或者您需要将它们设为enabled / disabled 以忽略required 标志。

分享 here 固定的 Stackblitz 以及可能的解决方案和小的改进（删除了 ngModel

您在此线程上提出了类似的问题 form validation on hidden fields