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

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

该模型有一个属性语言,我实例化如下：

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.

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

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

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

解决方法

The f@R_502_6447@t 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并告诉我您是否有任何疑问！

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

解决方法

相关推荐