Angular2：将 FormBuilder Validators.required 与复选框组一起使用的最佳方式答案

【问题标题】：Angular2: best way to use FormBuilder Validators.required with a checkbox groupAngular2：将 FormBuilder Validators.required 与复选框组一起使用的最佳方式
【发布时间】：2016-09-20 14:32:43
【问题描述】：

我正在使用 FormBuilder 和 ngFormModel 在 Angular2 中构建一个表单，但找不到一种优雅的方法来验证复选框组中的一个或多个复选框是否被选中。我不想编写自定义组件方法来验证我使用它们的任何地方的复选框组。理想情况下，将 ngFormModel 与 FormBuilder & Validators.required 甚至自定义验证器结合使用会很棒。

【问题讨论】：

标签： forms checkbox angular

【解决方案1】：

您需要为您的复选框定义一个组并指定一个组验证器：

this.myForm = this.builder.group({
  'checkboxes': fb.group({
    checkbox1: [ '' ],
    checkbox2: [ '' ]
  }, {validator: this.checkboxRequired})
});

和验证者：

checkboxRequired(group: FormGroup) {
  var valid = false;

  for (name in group.controls) {
    var val = group.controls[name].value;
    if (val) {
      valid = true;
      break;
    }
  }

  if (valid) {
    return null;
  }

  return {
    checkboxRequired: true
  };
}

您可以通过这种方式将其与表单链接：

<form [ngFormModel]="myForm">
  Checkbox1: <input type="checkbox" 
    [ngFormControl]="myForm.controls.checkboxes.controls.checkbox1"/>
  Checkbox2: <input type="checkbox" 
    [ngFormControl]="myForm.controls.checkboxes.controls.checkbox2"/>
</form>

查看这个问题了解更多详情：

Angular 2 form validating for repeat password

您可以利用 Validators.required 改进验证器代码：

checkboxRequired(group: ControlGroup) {
  var valid = false;

  for (name in group.controls) {
    var check = Validators.required(group.controls[name]);
    if (!check) {
      valid = true;
      break;
    }
  }

  if (valid) {
    return null;
  }

  return {
    checkboxRequired: true
  };
}

【讨论】：

【解决方案2】：

由于 API 略有变化。下面是上述答案的稍微更新的版本。这是故意的有点冗长

this.myForm = this._fb.group({
        myName: ['', [<any>Validators.required, <any>Validators.minLength(5)]],
        role: new FormGroup({
             prog:  new FormControl(null),
             mgr:  new FormControl(null),
             designer:  new FormControl(null),
          }, this.CheckGroupValidation)
  });

验证函数：

private CheckGroupValidation(group:FormGroup)
{

    var valid = false;
    var control_name:any;


    for (control_name in group.controls) 
    {
      var check = group.controls[control_name].value;
      if (check) { valid = true; break;  }
    }

    if (valid) { return null;}
    return { CheckGroupValidation: true}; // not qualified
}

模板文件

<form [formGroup]="myForm" novalidate (ngSubmit)="save()"   >

<ion-list>

    <ion-item>
        <ion-label>Username</ion-label>
        <ion-input type="text" value="" formControlName="myName" ></ion-input>
    </ion-item>


</ion-list>

<ion-list formGroupName="role">
    <ion-item>
        <ion-label>Programmer</ion-label>
        <ion-checkbox color="dark" checked="true" formControlName="prog" ></ion-checkbox>
    </ion-item>

    <ion-item>
        <ion-label>Manager</ion-label>
        <ion-checkbox color="dark" checked="false" formControlName="mgr"></ion-checkbox>
    </ion-item>

    <ion-item>
        <ion-label>Designer</ion-label>
        <ion-checkbox color="dark" checked="false" formControlName="designer"></ion-checkbox>
    </ion-item>

</ion-list> 

<button type="submit" 
         [disabled] = "!myForm.valid" 
         [hidden]= "isProcessing"
         ion-button full style="margin-top:0px;" >Submit</button>
</form>

【讨论】：