如何在提交时验证来自循环的复选框而不使用反应式表单-angular 8

我有几个来自循环的复选框，当没有选中任何复选框并单击提交按钮时，应显示错误消息，一旦选中任何复选框并仅验证成功，将显示控制台值。无需使用反应形式。下面是代码

app.component.html 组件技术

从'@angular/core'导入{Component，ViewChildren，QueryList，ElementRef}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
@ViewChildren（“数据”）复选框！：QueryList；
名称='角度'；
状态数据：任何；
errormessage:boolean=true；
恩戈尼尼特（）{
this.statusdata=[{“groupid”：1，“groupname”：“project1”}，{“groupid”：2，“groupname”：“project2”}，{“groupid”：3，“groupname”：“project3”}]；
}
editSelectedVal（）{
常量检查：布尔[]=this.checkbox.map(
checkbox=>{return checkbox.nativeElement.checked；}
);
控制台日志（检查）；
if（检查.indexOf（true）=-1）{
console.log（'notpassed'）；
this.errormessage=false；
}否则{
console.log（'passed'）；
this.errormessage=true；
}
}
}

component.html

开始编辑以查看一些神奇的事件：）

表格三

{{grpdata.groupname}


至少应检查一个
点击这里

是否可以使用模板驱动的表单？（Ngmodele）正确的方法是@caden311-他说我不想使用反应形式…@AbolfazlR我知道，但如果他不这样做，他会很难做到。学习它们，它们的存在是有原因的。

<div>
<p>Form 3</p>
<div *ngFor="let grpdata of statusdata">
<input type="checkbox"  value="{{grpdata.groupid}}" class="form-control">{{grpdata.groupname}}<br>
</div>
<div>
                        <div [hidden]="errormessage">At least one should be checked</div>
                    </div>
<button type="submit" (click)="editSelectedVal()">Click here</button>

</div>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  statusdata :any;
  errormessage:boolean = true;
ngOnInit() {
this.statusdata = [{"groupid":1,"groupname":"project1"},{"groupid":2,"groupname":"project2"},{"groupid":3,"groupname":"project3"}];
}

editSelectedVal(){
console.log('submitted edit');  
 }
}

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChildren('data') checkboxes !: QueryList<ElementRef>;
  name = 'Angular';
  statusdata :any;
  errormessage:boolean = true;

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

  editSelectedVal(){
    const checks: boolean[] = this.checkboxes.map(
      checkbox => { return checkbox.nativeElement.checked; }
    );
    console.log(checks);
    if(checks.indexOf(true) === -1) {
      console.log('not passed');
      this.errormessage = false;
    } else {
      console.log('passed');
      this.errormessage = true;
    }
  }
}

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happenss :)
</p>
<div>
  <p>Form 3</p>
  <div *ngFor="let grpdata of statusdata">

    <input #data type="checkbox"  value="{{grpdata.groupid}}" class="form-control">{{grpdata.groupname}}
    <br />

  </div>
  <div>
    <div [hidden]="errormessage">At least one should be checked</div>
  </div>
  <button type="submit" (click)="editSelectedVal()">Click here</button>
</div>