Question

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

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"检查工商管理硕士和btech它给我随机值，即有时btech有时mtech。我期望的是我检查的内容应该显示在控制台中。

Answer 1

我认为您的条件是否错误根据您的特定要求，您应该检查表格是否有效或是否选中了任何复选框。

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。如果您希望它不止于此，则必须对其进行更改。如果您改写三个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”。我不知道所需的输出是什么，因此请根据您的喜好更改代码。

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

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

如何验证角度为5的复选框

3 个答案: