0

我有一个带有验证的反应式表单，我试图弄清楚如何向项目列表添加额外的检查。前任。除了其他必填字段外，我还希望至少检查一项是否有效。

以下是正在显示的表单中的项目。您可以看到它只是一个名为“practicingStyles”的数组中的项目列表，它们被显示为按钮

前任。

 selectedPracticingStyles: number[] = [];

togglePracticeClass(style: number) {
  if (!this.selectedPracticingStyles.includes(style)) {
    this.selectedPracticingStyles.push(style);
  } else {
    this.selectedPracticingStyles.splice(this.selectedPracticingStyles.indexOf(style), 1);
  }
}
<div class="form-group">
  <label class="control-label">Practicing Styles:</label>
  <div class="btn-toolbar special">
    <ng-container *ngFor="let practiceStyle of practicingStyles; let i = index">
      <button type="button" class="btn mb-2" (click)="togglePracticeClass(practiceStyle.id)">
{{practiceStyle.name}}
     </button>
    </ng-container>
  </div>
</div>

我在 .ts 中的表单看起来像这样，我想如果我只是添加了另一个字段 'practicedStyles' 并添加了一个检查 '[null, this.selectedPracticingStyles.length > 0]' 那么这将验证它，但它不起作用.

this.infoForm = this.fb.group({
  gender: [null, Validators.required],
  introduction: [null],
  yearStarted: [null, Validators.required],
  experience: [null, Validators.required],
  practicedStyles: [null, this.selectedPracticingStyles.length > 0]
});

任何帮助，将不胜感激。

4

1 回答 1

1

您的函数 togglePracticeClass 必须更改您的 FormControl practicedStyles。您必须使用setValue。this.selectedPracticingStyles此外，如果长度> 0，则可以给这个值而不是给你的变量值，否则给值为空。所以你可以使用Validators.required

togglePracticeClass(style: number) {
  ...
  this.infoForm.get('practicedStyles').setValue(
        this.selectedPracticingStyles.length>0? this.selectedPracticingStyles:null)
  }
}

是的，FormControl 可以存储数组或 null

于 2020-09-21T21:27:04.127 回答