html - 如何使用 Angular 8 反应形式验证多个预选复选框
问题描述
我有几个复选框的值来自循环,在这里我使用反应形式验证这些复选框。我的验证是至少应该选择一个复选框。当我选中和取消选中复选框验证工作正常,但是当我的所有复选框已经预先选择并单击提交,即使它显示空消息。有没有解决方案。这是下面的代码。
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');
}
}
解决方案
<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()
});
推荐阅读
- azure - Azure devops 管道任务错误:Measure-Command 调用失败
- reactjs - 如何在打字稿中编写带有参数化道具和前向引用的 React 组件
- php - 不正确的整数值:laravel 7 中第 1 行的列的“[]”
- asp.net-mvc - 如何在每列后添加新行以输出 api mvc 控制器代码?
- javascript - 如果我有一个 React 前端和一个微服务后端,我可以有两个部署目标(S3 用于前端,EKS 用于后端)吗?
- html - CSS:绝对位置的表格溢出问题
- angular - 如何指定流以使用 MS Graph 将文件上传到 OneDrive
- python - 使用 spacy 将实体替换为实体标签
- git - 我可以从结束的 git rebase -i 中获取待办事项列表吗?
- docker - 在 Raspberry Pi 4 上,“FROM”基础镜像 golang:latest 和 arm32v7/golang:latest 有什么不同?