无法验证Angular 6 this.fb.array

我想对我的复选框FormBuilder.array进行验证，但尽管选中了其中一个复选框，表单仍然无效

我已经尝试了

验证器。required

和

验证器。requiredTrue

但它仍然不能按预期工作

TS:

this.Form = this.fb.group({
  stage: this.fb.array([], Validators.required)
})

HTML:

第一阶段
第二阶段
{{this.Form.valid | json}}

---

我有我的StackBlitz

可以在自己的组件中创建自定义验证器 或者在外面

您可以在中看到这两个模型

好吧，我把最一般的情况放在如果我们想向函数发送一个参数上（假设我们想让用户选择至少两个选项）。

关于stackblitz，我

问题是，onCheckArray上的函数没有更改FormArray（是的，您更改了值，但没有更改FormArray，因此进行了任何验证。请参见编辑的函数

//I repite the getter stage, so the answer can be understood

get stage(): FormArray {
  return this.Form.get('stage') as FormArray;
}

onCheckArray(event) { //you needn't send the value
    /* Selected */
    if (event.target.checked) {
      // Add a new control in the arrayForm, 
      // use push, but add a new FormControl TO the formArray
      this.stage.push(new FormControl(event.target.value));
    } else {
      /* unselected */
      // find the unselected element
      let i: number = 0;

       //we iterate over the formArray
      for (i = 0; i < this.stage.value.length; i++) {
        if (this.stage.value[i] == event.target.value) {
          //use removeAt(i)
          this.stage.removeAt(i);
          return;
        }
      }
    }
  }

}

如果初始化FormArray，则会出现问题

this.Form = this.fb.group({
  stage: this.fb.array([new FormControl("3")], this.minSelectedCheckboxes())
})

你的.html必须是

 <div class="form-check-label">
    <label class="checkbox-inline">
      <input type="checkbox" class="checkbox" name="none" value="1" #noneChk 
          <!--see how indicate when is checked-->
          [checked]="stage.value.indexOf('1')>=0"
           (change)="onCheckArray($event)">
      1
    </label>
  </div>

我们的.html变得像

<form class="form" [formGroup]="newForm" (ngSubmit)="onSubmit()">
  <div formArrayName="stage">
    <label class="checkbox-inline" *ngFor="let control of newForm.get('stage').controls;let i=index">
      <input type="checkbox" class="checkbox" [formControl]="control" >
          {{options[i]}}
    </label>
  </div>
</form>

<p>{{ valuesSelected | json }}</p>

{{options[i]}
{{valuesSelected | json}}

Mhfour，Validators.required不能在formArray中工作，因为formArray的值总是“某物”-一个数组-。你需要做一个自定义验证器来检查formArray的一个元素是否被选中。要理解复选框，请检查stackblitz的这个问题。注意：如果你想使用自定义表单控件，但不想使用材质，只需在复选框列表组件中替换

{key？{u data[i][text]：{u data[i]}

by

{key？{u data[i][text]：_data[i]}

是否有自定义验证的示例？我尝试了一些，但没有成功。我添加了一个答案来创建自定义验证程序。您好，我尝试了这个，但没有成功。在我的示例中，我使用Form.value.whateverControlName并将其用作数组。是否有自定义验证程序可以应用于该验证程序？@mhfour，我在您的.html.ta中看不到该表单如果您想查看示例，请查看我答案中的stackblitz，并使用.htmlhi更新您的问题。我刚刚将我的stackblitz添加到我的问题中。非常感谢您的帮助。非常感谢它现在可以工作！只是想知道，如果我希望复选框默认为空，我该如何做？我在中从formControl中删除了值3fb.array但初始值将为null，如何将其设为空？

阶段：this.fb.array（[]，this.minselectedcheckbox（））

，只是一个空数组

this.Form = this.fb.group({
  stage: this.fb.array([new FormControl("3")], this.minSelectedCheckboxes())
})

 <div class="form-check-label">
    <label class="checkbox-inline">
      <input type="checkbox" class="checkbox" name="none" value="1" #noneChk 
          <!--see how indicate when is checked-->
          [checked]="stage.value.indexOf('1')>=0"
           (change)="onCheckArray($event)">
      1
    </label>
  </div>

  options=["1","2","3","4"]; //our options
  get valuesSelected() ; //a function that return the options selected
  {
      return this.options.filter((x,index)=>this.newForm.get('stage').value[index])
  }
  //see how create the formArray, always has the same number of 
  //elements that our options

  this.newForm=new FormGroup({
        stage:new FormArray(this.options
             .map(x=>new FormControl(false)),this.minTrueCheckboxes())
  })

  minTrueCheckboxes(min = 1) {
    return (formArray: FormArray) => {
      return formArray.value.filter(x=>x).length>=min? null : { required: true };
    };
  }

<form class="form" [formGroup]="newForm" (ngSubmit)="onSubmit()">
  <div formArrayName="stage">
    <label class="checkbox-inline" *ngFor="let control of newForm.get('stage').controls;let i=index">
      <input type="checkbox" class="checkbox" [formControl]="control" >
          {{options[i]}}
    </label>
  </div>
</form>

<p>{{ valuesSelected | json }}</p>