RadioButton ngmodel не работает для логических значений

Question

У меня есть две радио кнопки в образце с ngModel.

<div id="container">
    <input type="radio" id="radiobuttonstoerung1" label="Blinkend" name="stoerungBlinkend" [(ngModel)]="project.modelvalue"
          value="true"/>
    <input type="radio" id="radiobuttonstoerung2"  label="Dauersignal" name="stoerungBlinkend" [(ngModel)]="project.modelvalue"
  value="false"/>
</div>

Когда я передал логическую переменную, она не работает.

export class RadioButtonController implements OnInit {
    project = { modelvalue: true };
}

Пример ссылки: https://stackblitz.com/edit/angular-cxt8bs-quvb7y?file=radiobutton.html

Сценарий, когда я передал 'stoerungBlinkend' как true, RadioButton со значением ="true" должен быть проверен. Если я передал его как ложное, то RadioButton со значением = "ложь" должен быть проверен.

Я нашел обходное решение, но кто-нибудь может объяснить подробно, почему вышеупомянутый сценарий не работает?

Answer 1

Как объясняется в документации по Angular, при установке значения переключателя с помощью value="true"вы фактически устанавливаете значение в строку "true", который не идентичен логическому true,

Чтобы установить логическое значение для элемента ввода, используйте привязку свойства с [value]="true":

<input type="radio" ... [(ngModel)]="project.stoerungBlinkend" [value]="true" />    
<input type="radio" ... [(ngModel)]="project.stoerungBlinkend" [value]="false" />

Смотрите этот стек для демонстрации.

Answer 2

Попробуйте что-то вроде этого:

Ваш TS:

    form: FormGroup;
constructor(fb: FormBuilder) {
    this.name = 'Angular2'
    this.form = fb.group({
            gender: ['', Validators.required]
});
}

HTML:

<form [formGroup]="form">
    <input type="radio" value='Male' formControlName="gender" >Male
    <input type="radio" value='Female' formControlName="gender">Female
</form>