Angular 2 FormGroup 在不是所有的 FormControl 都有效时有效答案

【问题标题】：Angular 2 FormGroup valid when not all his FormControls are validAngular 2 FormGroup 在不是所有的 FormControl 都有效时有效
【发布时间】：2017-03-20 23:53:48
【问题描述】：

正如我在标题中所写的那样，是否可以有一个具有多个 FormControls 的表单组，并且当并非所有控件都有效时该组才有效？

private moreInfoForm : FormGroup = this.formBuilder.group({
location: this.formBuilder.group({
  predefined : [''],
  custom : ['']
}),
demand_room : ['', [Validators.required]],
motivation : ['', Validators.required],
expectaions : ['', [Validators.required]],
participation : this.formBuilder.group({
  all : [''],
  wednesday : [''],
  thursday : [''],
  friday : [''],
  saturday : ['']
}),
donations : ['', Validators.required],
comments : ['', Validators.required]

});

https://plnkr.co/edit/v1v6UTrLypFqLpI1KNo7

对于位置组，我有一个预定义和自定义字段。对于预定义有一个，对于自定义有一个输入字段。当用户选择“预定义”或“自定义”时，是否可以验证组。

另一个是关于参与的。这些是复选框，当用户选中其中一个复选框时，表单应该是有效的。

谢谢。

【问题讨论】：

那么问题在于它没有验证复选框吗？
你能创建 plunkr 吗？
当然，你只需要适当地提供定义valid。
plnkr.co/edit/v1v6UTrLypFqLpI1KNo7

标签： angular angular2-forms

【解决方案1】：

您可以使用自定义验证器来检查predefined 或custom 是否有值，这里我们称之为validateGroup：

location: this.formBuilder.group({
  predefined : [''],
  custom : ['']
},{
    validator: (formGroup: FormGroup) => {
      return this.validateGroup(formGroup);
    }
}),

以及相应的函数检查是否已填充，如果有效则返回null：

private validateGroup(formGroup: FormGroup) {
  for (let key in formGroup.controls) {
    if (formGroup.controls.hasOwnProperty(key)) {
      let control: FormControl = <FormControl>formGroup.controls[key];
      if (control.value) {
        return null;
      }
    }
  }
  return {
    validateGroup: {
      valid: false
    }
  };
}

同样的功能，validateGroup，你可以在你的日子里使用，所以你最终构建的表单看起来像这样：

  private moreInfoForm : FormGroup = this.formBuilder.group({
    location: this.formBuilder.group({
      predefined : [''],
      custom : ['']
    },{
        validator: (formGroup: FormGroup) => {
          return this.validateGroup(formGroup);
        }
    }),
    demand_room : ['', [Validators.required]],
    motivation : ['', Validators.required],
    expectaions : ['', [Validators.required]],
    participation : this.formBuilder.group({
      all : [''],
      wednesday : [''],
      thursday : [''],
      friday : [''],
      saturday : ['']
    },{
        validator: (formGroup: FormGroup) => {
          return this.validateGroup(formGroup);
        }
    }),
    donations : ['', Validators.required],
    comments : ['', Validators.required]
  });

您可以阅读更多关于上述内容的信息，on this page。

这是你的分叉

Plunker

附言。请注意我对单选按钮所做的更改，以便将其正确添加到您的表单中：

demand_rooms = ['Yes','No'];

<label *ngFor="let demand_room of demand_rooms">
  <input type="radio" name="demand_room" formControlName="demand_room" [value]="demand_room">Yes
</label>

【讨论】：