Как проверить флажок в угловых 5

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", который я пытался проверить, проверяя mbaи btech дает мне случайное значение, т.е. когда-то btech иногда mtech.Я ожидаю, что то, что я проверил, должно отображаться в консоли.

Answer 1

Атрибуты

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

Добавление чего-то будет таким,заставит это работать.

Answer 2

Я думаю, у вас неправильное условие для вашего конкретного требования вы должны проверить, является ли форма действительной или какие-либо из флажков отмечены.

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 3

У вас есть некоторые опечатки в журналах консоли:

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», если установлены все три флажка. Я не знаю, каков желаемый вывод, поэтому измените код по своему вкусу.