Angular2中的复选框组处理和验证

The first problem comes with validation. If one checks and unchecks a checkbox (and no other checkbox is checked),the input is still valid – somehow strange.

我注意到如果语言的值是一个空数组,它会传递Validations.required检查.

The second problem comes with the value,which is true if two ore more languages are checked and false otherwise.

Then there is a third problem with the initial value of languages which is just an empty array,but causes all checkboxes to be checked initially (doesn’t happen if the initial value is set to a string),although I can not spot any checked attribute in the DOM.

我认为问题是你将多个控件绑定到单个FormControl的方式,我相信FormArray需要涉及,可能使用不同的FormControl来存储checkbox数组的结果.

So,is there any guide on how to work with checkbox groups? Any advice or ideas?

当然,我实施了它,我将首先发布实现,然后是一些注释.您可以在https://plnkr.co/edit/hFU904?p=preview查看它的运行情况

@Component({
  template: `
    <template [ngIf]="loading">
      Loading languages...
    </template>
    <template [ngIf]="!loading">
      <form [formGroup]="modelForm">
        <div [formArrayName]="'languages'" [class.invalid]="!modelForm.controls.selectedLanguages.valid">
          <div *ngFor="let language of modelForm.controls.languages.controls; let i = index;" [formGroup]="language">
            <input type="checkbox" formControlName="checked" id="language_{{ language.controls.key.value }}">
            <label attr.for="language_{{ language.controls.key.value }}">{{ language.controls.value.value }}</label>
          </div>
        </div>
        <hr>
        <pre>{{modelForm.controls.selectedLanguages.value | json}}</pre>
      </form>
    </template>
  `
})
export class AppComponent {  
    loading:boolean = true;
    modelForm:FormGroup;
    languages:LanguageKeyValues[];

    constructor(public formBuilder:FormBuilder){
    }

    ngOnInit() {

      this.translateService.get('languages').subscribe((languages:LanguageKeyValues[]) => {

        let languagesControlArray = new FormArray(languages.map((l) => {
          return new FormGroup({
            key: new FormControl(l.key),value: new FormControl(l.value),checked: new FormControl(false),});
        }));

        this.modelForm = new FormGroup({
          languages: languagesControlArray,selectedLanguages: new FormControl(this.mapLanguages(languagesControlArray.value),Validators.required)
        });

        languagesControlArray.valueChanges.subscribe((v) => {
          this.modelForm.controls.selectedLanguages.setValue(this.mapLanguages(v));
        });

        this.loading = false;
      });
    }

    mapLanguages(languages) {
      let selectedLanguages = languages.filter((l) => l.checked).map((l) => l.key);
      return selectedLanguages.length ? selectedLanguages : null;
    }
}

这里的主要区别是我将你的model.languages合并到你的modelForm中,现在重复模板中的modelForm.languages FormArray.

modelForm.languages已成为modelForm.selectedLanguages,现在是基于modelForm.languages中的checked值的计算值.如果未选择任何内容,则将modelForm.selectedLanguages设置为null,以使验证失败.

在语言可用之前,modelForm没有实例化,这主要是个人偏好,我确信你可以异步地将语言和selectedLanguages附加到你的modelForm,但它简化了同步构建它的事情.

我拿出了translateService.get(‘languages’)| async,我注意到在模板中调用了这个函数的一些奇怪行为,我更喜欢在组件中展开我的observable,以捕获加载/错误状态.

它不像一些原生复选框数组表单控件那样优雅,但它干净且非常灵活.查看the plunker并告诉我您是否有任何疑问！