How to Validate Checkbox in angular 5

Question

I am trying to validate my checkbox in a form with different fields, but the problem I am getting is that

HTML code:

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

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

I am trying to display whose are checked should be display on console by I am not getting the proper output, even the checkbox are not selected the "job_courses" is showing the "btech" I tried to check by check mba and btech its giving me random value i.e sometime btech sometime mtech. What I am expecting is that what I checked should be display in console.

Some typos here: console.log('mtech', this.courses_btech); console.log('btech', this.courses_mtech); You are writing "mtech" + courses_btech, and vice versa. — John
– John, Commented Jun 26, 2018 at 9:00
Please make a minimal reproducible example showing the issue. — user4676340
– user4676340, Commented Jun 26, 2018 at 9:07

faizan baig · Accepted Answer · 2018-06-26 11:33:43Z

1

I think you have your if condition wrong for your specific requirement you should check whether form is valid or any of the checkboxes are checked.

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

answered Jun 26, 2018 at 11:33

faizan baig

1,30315 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John · Accepted Answer · 2018-06-26 09:07:56Z

0

You have some typos in your console logs:

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

Should be

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

And this line, will only give you the first match of all checkboxes.

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

It will only be either mtech, or btech, or mba. If you want it to be more than that, you must change it. It is easier to read if you make three if-else sentences instead. I am now making job_courses be a string of all checked answers.

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); Will print "mtechbtechmba" if all three checkboxes are checked. I do not know what the desired output is, so change the code to your liking.

answered Jun 26, 2018 at 9:07

John

11.6k5 gold badges60 silver badges75 bronze badges

1 Comment

Wasif Over a year ago

for now, I want only 3 things(mba,mtech or btech), which I am not getting, I tried above method also but still not get the appropriate result

Shyam Tayal · Accepted Answer · 2018-06-26 09:31:37Z

0

[(ngModel)] attributes requires name attribute too along with it, to work thats what you are missing in your code .

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

Adding it something will like this , will make it work.

answered Jun 26, 2018 at 9:31

Shyam Tayal

4862 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to Validate Checkbox in angular 5

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related