时间戳

首页 > 解决方案 > 如何验证打字稿中的多个选择框

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

问题描述

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

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

这工作正常，但在仅选择 1 个选项后，允许用户单击添加到购物车按钮，我想限制该功能。我想我需要实现formArray。但我被困在这里。我会很感激任何帮助。

这是堆栈闪电战以获取更多详细信息

标签： angulartypescriptvalidationionic-frameworkangular-forms

解决方案

将您的表单初始化为

  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;
  });

角演示

推荐阅读