Angular 4 反应式表单总是无效，需要复选框的自定义验证

Question

使用 Angular 4，我有一个带有复选框的反应式表单。必须至少选中一个复选框才能提交表单。

我创建了一个自定义验证，它似乎返回了正确的值，但表单总是无效。但是，当我检查表单控件是否有错误时，我得到错误。

这是具有相同行为的示例代码：

@Component({
  selector: 'my-app',
  providers: [FormBuilder],
  template: `
    <div> 
      Checkbox values: {{alertForm.value | json}}
      <mark> Is Form Valid: {{alertForm.valid}} </mark> <-- WHY IS FORM VALID ALWAYS FALSE?
      Does Fields have error: {{alertForm.get('fields').hasError('checkboxSelected')}}
    </div>

    <form [formGroup]="alertForm">
      <fieldset class="form-group" formGroupName="fields">
        <legend class="col-md-4"> Fields</legend>
        <div class="col-md-8 checkbox column-2">
            <label *ngFor="let type of types.controls; let i=index"> 
              <input name="fieldsAdd" type="checkbox" [formControl]="type" />
                {{fields[i].name}}
            </label>
        </div>
    </fieldset>
    </form> 

  `
})
export class App implements OnInit {
  alertForm: FormGroup;
  fields = [{name:"field1", checked: false}, {name:"field2", checked: false}];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.alertForm = this.fb.group({
            fields: this.fb.array([], this.checkboxValidator)
        });

    const controlArray = <FormArray>this.alertForm.controls['fields'];
    this.fields.map(field => controlArray.push(this.fb.control(field.checked)));
  }


  checkboxValidator(control: AbstractControl) {
        return { 'checkboxSelected': !(control.value.indexOf(true) >= 0)  };
    }

     get types(): FormArray {
        return this.alertForm.get('fields') as FormArray;
    };

}

---- Plunker ----

谢谢

Answer 1

这里的主要规则是

验证器函数接受一个 Angular 控制对象和 return 如果控制值有效则为 null 或验证错误对象 但你总是return 对象 (docs)

{ checkboxSelected: true }

或

{ checkboxSelected: false }

当您检查 alertForm.get( 'fields').hasError( 'checkboxSelected') angular 时，只需进行以下匹配：

return control && control.errors ? control.errors[errorCode] : null;

所以它是正确的。

为了解决这个问题，您应该按如下方式更改 checkboxValidator 方法：

checkboxValidator(control: AbstractControl) {
  return control.value.indexOf(true) === -1  ? { 'checkboxSelectionError': true } : null ;
}

我也将错误名称更改为更合适的名称。

Example

Angular 4 反应式表单总是无效，需要复选框的自定义验证

Angular 4 Reactive Form always invalid with custom validation for required checkboxes

angular

angular-reactive-forms

angular-forms