Question

我有一个Angular Reactive Form，人们可以选择他们最喜欢的最小1和最多3个水果。

模板：

<div>
    <h3>Which maximum 3 fruits do you like best?</h3>
    <form *ngIf="myForm" [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)" novalidate>
        <div *ngFor="let answer of answers.controls; let i=index">
            <input type="checkbox" [formControl]="answer">{{fruits[i]}}<br>
        </div>
        <button type="submit" [disabled]="!myForm.valid">Submit</button>
    </form>
</div>

组件：

export class AppComponent {

  myForm: FormGroup;
  fruits: Array<string> = ["apple", "pear", "kiwi", "banana", "grape", "strawberry", "grapefruit", "melon", "mango", "plum"];

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({}, {
      validator: this.anotherValidator.bind(this)
    });
    let answersFormArray = this.fruits.map(fruit => { return this.formBuilder.control(false, [this.validateMaxCheckboxes.bind(this)]) });
    this.myForm.setControl('answers', this.formBuilder.array(answersFormArray));
  }

  validateMaxCheckboxes(control: FormControl) {
    return null;
  };

  anotherValidator(group: FormGroup) {
    return null;
  };

  get answers(): FormArray {
    return this.myForm.get('answers') as FormArray;
  };

  onSubmit(submit) {
    console.log(submit.answers);
  }

}

你最喜欢哪三种水果？然后显示用户可以选择的水果列表（复选框）。

我想有这种行为：

如果用户没有选择任何内容，则禁用提交按钮，需要选择最少1个水果。如果用户选择了1或2个水果，则启用提交按钮。如果用户选择第3个水果（选中3个复选框），我想禁用未选中的所有水果，启用提交按钮。如果未选中已检查的3个水果中的一个，则启用所有复选框。这样，用户可以从列表中选择最少1个和最多3个水果。

我尝试了很多东西，谷歌搜索了很多，但我无法让它工作。

Answer 1

@ArunKumaresh的答案也有效，但离我的原始代码太远了。但他指出了我正确的方向，所以我可以拿出这个解决方案：

模板：

<div>
    <h3>Which maximum 3 fruits do you like best</h3>
    <form *ngIf="myForm" [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)" novalidate>
        <div *ngFor="let answer of answers.controls; let i=index">
            <input type="checkbox" [formControl]="answer" (change)="onChangeAnswer($event.target.checked)">{{fruits[i]}}<br>
        </div>
        <button type="submit" [disabled]="!myForm.valid">Submit</button>
    </form>
</div>

组件：

export class AppComponent {

  fruits: Array<string> = ["apple", "pear", "kiwi", "banana", "grape", "strawberry", "grapefruit", "melon", "mango", "plum"];
  myForm: FormGroup;
  numChecked: number = 0;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({}, {
      validator: this.minOneAnswer.bind(this)
    });
    let answersFormArray = this.fruits.map(fruit => { return this.formBuilder.control(false) });
    this.myForm.setControl('answers', this.formBuilder.array(answersFormArray));
  }

  minOneAnswer(control) {
    return this.numChecked === 0 ? { minOneAnswerChecked: true } : null;
  }

  onChangeAnswer(checked: boolean) {
    checked ? this.numChecked++ : this.numChecked--;
    const answerFormArray = this.myForm.get('answers') as FormArray;
    if (this.numChecked >= 3) {
      answerFormArray.controls.forEach((item) => {
        if (!item.value) item.disable()
      })
    } else {
      answerFormArray.controls.forEach((item) => {
        if (!item.value) item.enable()
      })
    }
  }

  get answers(): FormArray {
    return this.myForm.get('answers') as FormArray;
  };

  onSubmit(form: FormGroup) {
    const answerFormArray = form.get('answers') as FormArray;
    answerFormArray.controls.forEach((item) => {
      if (!item.value) item.enable()
    })
    console.log(form.value);
  }
}

Angular Reactive Forms自定义验证器最小和最大复选复选框

1 个答案: