如何从 Angular 中的项目列表添加表单验证

Question

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

以下是正在显示的表单中的项目。您可以看到它只是一个名为 '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]
});

如有任何帮助，我们将不胜感激。

Answer 1

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

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

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

如何从 Angular 中的项目列表添加表单验证

How to add form validation from a list of items in Angular

html

javascript

typescript

angular

angular2-form-validation