如何使用角度8反应形式验证多个预选复选框

Question

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

home.component.html

<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>

home.component.ts

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');  
 }
}

Answer 1

<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()
     });