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

Question

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

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

这很好用，但在仅选择 1 个选项后，允许用户点击“添加到购物车”按钮，我想限制该功能。我想我需要实施 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

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

How to validate multiple select boxes in typescript

validation

typescript

ionic-framework

angular

angular-forms