如何验证打字稿中的多个选择框

Question

这是场景。我有大量包含产品信息的数据。该产品有各种可用的选项，而无需选择所有选项，用户不应被允许将产品添加到购物车或购买。这是我尝试过的代码。

this.form = new FormGroup({
    'options': new FormControl(null, [Validators.required]),
});

这很好用，但是在只选择了一个选项后，用户可以点击添加到购物车按钮，我想限制该功能。我想我需要实现formArray。但我被困在这里。如有任何帮助，我将不胜感激。

这里是stackblitz了解更多详情

Answer 1

将表单初始化为

  initForm() {
    this.form = new FormGroup({
      options: new FormArray([]),
    });
  }

获取或设置选项的辅助方法

  set setOptionsFA(controls: FormControl[]) {
    controls.forEach((control) => this.optionsFA.push(control));
  }

  get optionsFA(): FormArray {
    return this.form.get('options') as FormArray;
  }

  get optionsControls(): FormControl[] {
    return this.optionsFA.controls as FormControl[];
  }

从您的选项列表中创建FormControl[] 的方法

  createOptionControls(options: any[]): FormControl[] {
    return options.map(
      (_) => new FormControl(null, Validators.required)
    ) as FormControl[];
  }

使用RxJs tap 操作符调用createOptionsControls 方法并将选项传递给它并设置FormArray选项

 this.appService
  .productDetail(247)
  .pipe(
    tap(
      ({ options }) =>
        (this.setOptionsFA = this.createOptionControls(options))
    )
  )
  .subscribe((res) => {
    this.data = res;
  });

Angular Demo