Html 如何使用angular 8被动表单验证多个预选复选框

我有几个值来自循环的复选框，在这里我使用反应式表单验证这些复选框。我的验证是至少应选中一个复选框。当我选中并取消选中复选框时，验证工作正常，但当我的所有复选框都已预选并单击“提交”时，即使它显示的是空消息。是否有任何解决方案。下面是代码

home.component.html

---

你能检查一下这个.edittitle.value的值吗？没有显示错误好的，你能创建一个stackblitz吗？因此，我们可以测试您的代码并查看错误？您似乎只有一个表单组，每个组都需要一个。谢谢您的回答，我使用了您的概念，但这里我需要选择所有复选框来提交表单，但我的要求是至少选择一个来提交表单。您可能正在寻找跨域验证吗？你可以检查我已经创建了一个演示。这里我需要关于第二个表单的帮助。您多次尝试使用同一个表单组。您将需要创建一个FormArray，并在

statusData

中有一个组时，像

editForm

一样推送一个FormGroup。请告知您自己Formarray以及如何动态使用它们。

<div>
<p>Form 1</p>
<form [formGroup]="registerForm">
<div *ngFor="let grpdata of statusdata">
<input type="checkbox" formControlName="title" value="{{grpdata.groupid}}" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.title.errors }">{{grpdata.groupname}}<br>

</div>
<div *ngIf="submitted && f.title.errors" class="invalid-feedback">
                        <div *ngIf="f.title.errors.required">Title is required</div>
                    </div>
<button type="submit" (click)="getSelectedVal()">Click here</button>
 </form>
</div>

<div>
<p>Form 2</p>
<form [formGroup]="editForm">
<input type="textbox" disabled formControlName="edithidden" [(ngModel)]="hello" class="form-control"><br>
<div *ngFor="let grpdata of statusdata">
<input type="checkbox" formControlName="edittitle" [checked]=true value="{{grpdata.groupid}}" class="form-control" [ngClass]="{ 'is-invalid': submitted1 && g.edittitle.errors }">{{grpdata.groupname}}<br>


</div>
<div *ngIf="submitted1 && g.edittitle.errors" class="invalid-feedback">
                        <div *ngIf="g.edittitle.errors.required">Title is required</div>
                    </div>
<button type="submit" (click)="editSelectedVal()">Click here</button>
 </form>
</div>

import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
declare var $: any;
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
    submitted = false;
    submitted1 = false;
  getListData: any;
  registerForm: FormGroup;
  editForm: FormGroup;
  statusdata: any;
  constructor(private commonserviceService: CommonserviceService,private formBuilder: FormBuilder)
  {
      this.registerForm = this.formBuilder.group({
            title: [false, Validators.requiredTrue],
     });
     this.editForm = this.formBuilder.group({
             edittitle: [false, Validators.requiredTrue],
             edithidden: new FormControl()
     });

  }

  ngOnInit() {

      this.statusdata = [{"groupid":1,"groupname":"project1"},{"groupid":2,"groupname":"project2"},{"groupid":3,"groupname":"project3"}];

  }
   get f() { return this.registerForm.controls; }
   get g() { return this.editForm.controls; }
 getSelectedVal(){

     this.submitted = true;

        // stop here if form is invalid
        if (this.registerForm.invalid) {
            return;
        }
console.log('submitted');   
 }
 editSelectedVal(){

     this.submitted1 = true;

        // stop here if form is invalid
        if (this.editForm.invalid) {
            return;
        }
console.log('submitted edit');  
 }
}

<input type="checkbox" formControlName="edittitle" [checked]=true...

this.editForm = this.formBuilder.group({
             edittitle: [true, Validators.requiredTrue], // true here, you had false here
             edithidden: new FormControl()
     });