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

Question

我不明白,应该如何在angular2中以模型驱动的形式处理复选框组.

该模型有一个languages我实例化的属性,如下所示:

this.model = {
  languages: []
};

使用FormBuilder创建的形式:

this.modelForm = this.formBuilder.group({
  'languages': [model.languages, Validators.required],
});

和模板:

<div *ngFor="let language of translateService.get('languages') | async | key_value">
  <input type="checkbox" name="languages[]" formControlName="languages" value="{{ language.key }}" id="language_{{ language.key }}">
  <label attr.for="language_{{ language.key }}">{{ language.value }}</label>
</div>

在div需要对造型的目的(定制复选框),key_value使按键和循环使用的语言,明显的价值.

第一个问题来自验证.如果检查并取消选中一个复选框(并且未选中其他复选框),则输入仍然有效 - 不知何故很奇怪.

第二个问题伴随着价值,即true如果检查两种或更多种语言,则false另外.

然后有第三个问题,其初始值languages只是一个空数组,但会导致所有复选框最初被检查(如果初始值设置为a string,则不会发生),尽管我无法发现任何checked属性DOM.

我正在使用最新的离子beta(2.0.0-beta.10),它使用角度/核心版本2.0.0-rc.4和角度/形式版本0.2.0.

那么,有没有关于如何使用复选框组的指南？有什么建议或想法吗？

Answer 1

第一个问题来自验证.如果检查并取消选中一个复选框(并且未选中其他复选框),则输入仍然有效 - 不知何故很奇怪.

我注意到如果值languages是一个空数组,它会通过Validations.required检查.

第二个问题是值,如果选中两种或更多种语言则为true,否则为false.

然后第三个问题是语言的初始值只是一个空数组,但会导致所有复选框最初被检查(如果初始值设置为字符串则不会发生),尽管我无法发现任何检查DOM中的属性.

我认为问题在于您将多个控件绑定到单个控件的方式FormControl,我认为FormArray需要涉及,可能会使用不同的FormControl存储复选框数组的结果.

那么,有没有关于如何使用复选框组的指南？有什么建议或想法吗？

当然,我实施了它,我将首先发布实现,然后是一些注释.您可以在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.如果未选择任何内容,modelForm.selectedLanguages则设置为null,以使验证失败.

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

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

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