如何在角度 5 中验证复选框答案

【问题标题】：How to Validate Checkbox in angular 5如何在角度 5 中验证复选框
【发布时间】：2018-06-26 19:33:43
【问题描述】：

我正在尝试在具有不同字段的表单中验证我的复选框，但我遇到的问题是

HTML 代码：

<div class="form-group">
    <label class="login_label">Courses</label>
    <span style="color:#00bfff">*</span>
    <input [ngModelOptions]="{standalone: true}" [(ngModel)]="courses_mba" type="checkbox" class="" value="mba">Mba
    <input [ngModelOptions]="{standalone: true}" [(ngModel)]="courses_btech" type="checkbox" class="" value="btech">Btech
    <input [ngModelOptions]="{standalone: true}" [(ngModel)]="courses_mtech" type="checkbox" class="" value="mtech">Mtech
</div>

Ts 代码：

if (this.jobForm.invalid && (this.courses_mba === undefined || this.courses_btech === undefined || this.courses_mtech === undefined)) {
    this.snackBarService.requiredValue(' Please complete the form');
} else {
    this.job_courses = this.courses_mtech ? 'mtech' : '' + this.courses_btech ? 'btech' : '' + this.courses_mba ? 'mba' : '';
    this.snackBarService.requiredValue(' form Submitted Successfully');
    console.log('CArray', this.job_coursess);
    console.log('Course', this.job_courses);
    console.log('mba', this.courses_mba);
    console.log('mtech', this.courses_btech);
    console.log('btech', this.courses_mtech);
}

我试图通过我没有得到正确的输出来显示应在控制台上显示的被选中的对象，即使未选中复选框 "job_courses" 正在显示 "btech" 我试图通过检查 mba 和 btech 进行检查它给了我随机值，即有时是 btech，有时是 mtech。我期望的是我检查的内容应该显示在控制台中。

【问题讨论】：

这里有些错别字：console.log('mtech', this.courses_btech); console.log('btech', this.courses_mtech); 你写的是"mtech" + courses_btech，反之亦然。
这里我只是检查一下btech，mtech的价值是什么
请发minimal reproducible example 显示问题。

标签： javascript angular checkbox

【解决方案1】：

我认为你的 if 条件错误对于您的具体要求，您应该检查表单是否有效或是否选中任何复选框。

if ( this.jobForm.invalid ||( this.courses_mba === undefined && this.courses_btech === undefined && this.courses_mtech === undefined) {
    this.snackbarService.requiredValue('Please complete the form');
} else {
    this.job_courses = this.courses_mtech ? 'mtech' : '' + this.courses_btech ? 'btech' : '' + this.courses_mba ? 'mba' : '';
    this.snackBarService.requiredValue(' form Submitted Successfully');
}

【讨论】：

【解决方案2】：

您的控制台日志中有一些拼写错误：

console.log('mtech', this.courses_btech); 
console.log('btech', this.courses_mtech);

应该是

console.log('mtech', this.courses_mtech); 
console.log('btech', this.courses_btech);

而这一行，只会给你所有复选框的第一个匹配项。

this.job_courses = this.courses_mtech ? 'mtech' : '' + this.courses_btech ? 'btech' : '' + this.courses_mba ? 'mba' : '';

它只会是mtech、btech 或mba。如果你希望它不止于此，你必须改变它。如果您改为使用三个 if-else 句子，则更易于阅读。我现在 making job_courses 是所有已检查答案的字符串。

this.job_courses = "";
if(this.courses_mtech){
 this.job_courses += "mtech"
}
if(this.courses_btech){
 this.job_courses += "btech"
}
if(this.courses_mba){
 this.job_courses += "mba"
}

console.log(this.job_courses); 如果选中所有三个复选框，将打印“mtechbtechmba”。我不知道想要的输出是什么，所以根据自己的喜好更改代码。

【讨论】：

目前，我只想要 3 样东西（mba、mtech 或 btech），我没有得到，我也尝试了上述方法，但仍然没有得到适当的结果

【解决方案3】：

[(ngModel)] 属性也需要 name 属性，才能正常工作，这就是您的代码中缺少的内容。

<div class="form-group">
  <label class="login_label">Courses</label>
  <span style="color:#00bfff">*</span>
  <input [ngModelOptions]="{standalone: true}" name="mba" [(ngModel)]="courses_mba" type="checkbox" class="" value="mba">Mba
  <input [ngModelOptions]="{standalone: true}" name="btech" [(ngModel)]="courses_btech" type="checkbox" class="" value="btech">Btech
  <input [ngModelOptions]="{standalone: true}" name="mtech" [(ngModel)]="courses_mtech" type="checkbox" class="" value="mtech">Mtech
</div>

添加它会像这样，将使其工作。

【讨论】：