javascript - 如何从 Angular 中的项目列表中添加表单验证
问题描述
我有一个带有验证的反应式表单,我试图弄清楚如何向项目列表添加额外的检查。前任。除了其他必填字段外,我还希望至少检查一项是否有效。
以下是正在显示的表单中的项目。您可以看到它只是一个名为“practicingStyles”的数组中的项目列表,它们被显示为按钮
前任。
selectedPracticingStyles: number[] = [];
togglePracticeClass(style: number) {
if (!this.selectedPracticingStyles.includes(style)) {
this.selectedPracticingStyles.push(style);
} else {
this.selectedPracticingStyles.splice(this.selectedPracticingStyles.indexOf(style), 1);
}
}
<div class="form-group">
<label class="control-label">Practicing Styles:</label>
<div class="btn-toolbar special">
<ng-container *ngFor="let practiceStyle of practicingStyles; let i = index">
<button type="button" class="btn mb-2" (click)="togglePracticeClass(practiceStyle.id)">
{{practiceStyle.name}}
</button>
</ng-container>
</div>
</div>
我在 .ts 中的表单看起来像这样,我想如果我只是添加了另一个字段 'practicedStyles' 并添加了一个检查 '[null, this.selectedPracticingStyles.length > 0]' 那么这将验证它,但它不起作用.
this.infoForm = this.fb.group({
gender: [null, Validators.required],
introduction: [null],
yearStarted: [null, Validators.required],
experience: [null, Validators.required],
practicedStyles: [null, this.selectedPracticingStyles.length > 0]
});
任何帮助,将不胜感激。
解决方案
您的函数 togglePracticeClass 必须更改您的 FormControl practicedStyles
。您必须使用setValue。this.selectedPracticingStyles
此外,如果长度> 0,则可以给这个值而不是给你的变量值,否则给值为空。所以你可以使用Validators.required
togglePracticeClass(style: number) {
...
this.infoForm.get('practicedStyles').setValue(
this.selectedPracticingStyles.length>0? this.selectedPracticingStyles:null)
}
}
是的,FormControl 可以存储数组或 null
推荐阅读
- ruby-on-rails - 通过中间表在同一模型上建立多对多关系
- multithreading - 为内核保留硬件线程(“核心”或“处理器”)(IE,防止调度程序将用户工作分配给该硬件线程)
- javascript - 将 npm 模块集成到纯 Javascript 应用程序中,不知道如何修复错误
- firewall - NAT防火墙后面的Apache Geode
- css - 部署的 gh-pages 站点看起来与 localhost 不同(React 应用程序)
- google-cloud-platform - 使用服务帐户错误设置计划查询 PermissionDenied: 403 The caller does not have permission in data_transfer_service
- salesforce - Salesforce Marketing Cloud API - 订阅者重写
- qt - QT,使用带有自定义消息处理程序的 qDebug() 不显示行/文件/函数信息
- python - 计算两个 3d 轨迹之间表面积的可靠方法?
- android - TermuxArch 中缺少 sdkmanager “模拟器”,但在正常的 Arch Linux 安装中可用