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

См. this stackblitz для демонстрации.

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>