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

Question

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

网页代码：

<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"显示我试图通过检查 mba 和 btech 来检查"btech"它给了我随机值，即有时 btech 有时 mtech。 我期望的是我检查的内容应该显示在控制台中。

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

Answer 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。如果你希望它不止于此，你必须改变它。如果你改成三个如果-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"。我不知道所需的输出是什么，因此请根据自己的喜好更改代码。

Answer 3

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

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

添加它的东西会像这样，这将使它工作。