Angular 表格组。单选按钮未激活

Question

早上好。我正在 angular 中使用 React 表单。我正在尝试根据数据库中的真/假状态标记两个单选按钮。

随着变量viernesOk = true 它运行完美（激活了单选按钮 (SI)）。

<div class="col-6">
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" formControlName="viernesOk"  [checked]="form.value.viernesOk === true" value=true>
        <label class="form-check-label" for="inlineCheckbox1">SI</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio"  formControlName="viernesOk"   [checked]="form.value.viernesOk === false" value=false>
        <label class="form-check-label" for="inlineCheckbox4">NO</label>
     </div>

问题出在 viernesOk = false 时。它不标记单选按钮 (NO)。

感谢您的帮助。

Answer 1

尝试使用表单组将其添加到 html

    <div class="col-6" [formGroup]="form">

在你的组件中

form: FormGroup;     
  constructor(fb: FormBuilder){    
      this.form = fb.group({    
        viernesOk:false    
      });   
  }

Answer 2

终于解决了，虽然不满意

1。变量 viernesOk 已转换为字符串：

viernesOk:new FormControl("false"),

2.

我在值中加上引号：

之前

[checked]="form.value.viernesOk=== true "
 value = true
[checked]="form.value.viernesOk=== false "
 value = false

现在

[checked]="form.value.viernesOk=== true "
 value = "true"
[checked]="form.value.viernesOk=== false "
 value = "false"

**Works for angular material:**
<mat-radio-group formControlName="viernesOk">
          <mat-radio-button class="material-radio" value="true"[checked]="form.value.viernesOk === true">SI</mat-radio-button>
          <mat-radio-button class="material-radio" value="false"  [checked]="form.value.viernesOk === false">NO</mat-radio-button>
  </mat-radio-group>

还有bootstrap:

<div class="col-6">

      <div class="form-check form-check-inline">
        <input 
        class="form-check-input" 
        type="radio" 
        formControlName="viernesOk"  
        [checked]="form.value.viernesOk === true" 
        value="true">
        <label class="form-check-label">SI</label>
      </div>

      <div class="form-check form-check-inline">
        <input 
      class="form-check-input" 
      type="radio"  
      formControlName="viernesOk"   
      [checked]="form.value.viernesOk === false" 
      value="false">
        <label class="form-check-label">NO</label>
      </div>      
   </div>

因此，我想知道为什么条件语句将布尔值读取为字符串？ ;[

Angular 表格组。单选按钮未激活

Angular formGroup. The radio button does not activate

forms

radio-button

angular-material

bootstrap-4

angular