代码之家 › 专栏 › 技术社区 › Wasif

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

checkbox angular javascript

Wasif · 技术社区 · 7 年前

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>

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"

3 回复 | 直到 7 年前

faizan baig 7 年前

对于您的特定要求,您应该检查表单是否有效,或者是否选中了任何复选框。

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

John 7 年前

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”。我不知道所需的输出是什么,所以请根据您的喜好更改代码。

Shyam Tayal 7 年前

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