Обработка и проверка группы флажков в Angular2

первая проблема связана с проверкой. Если один проверяет и снимает флажок (а другой флажок не установлен), вход по - прежнему действителен-как-то странно.

я заметил, что если значение 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, я заметил, что некоторые странное поведение с этой функцией вызывается в шаблоне, и я предпочитаю разворачивать мои наблюдаемые в компоненте в любом случае, чтобы захватить состояния загрузки/ошибки.

это не так элегантно, как может быть некоторый собственный контроль формы массива флажков, но он чистый и очень гибкий. Проверьте в plunker и дайте мне знать если вы имеете любые вопросы!