将传入的整数值绑定到表单组中的 mat-radio-button 值

Question

我正在从数据库加载整数类型值以填充表单组的单选按钮。如果我将传入的整数转换为字符串，则无线电组仅读取值。如何让 mat-radio-group 接受整数值？

我试过将 value="1" 更改为 [value]="1" 但没有效果。我能找到的唯一参考是 material2 github 页面 here

上的一个问题

HTML

 <form class="mb-4" [formGroup]="wifiForm">
        <label id="wifi_available">Is working WiFi present on the property?</label>
        <mat-radio-group
          aria-labelledby="wifi_available"
          class="list-radio-group w-100 mb-4 mt-2"
          formControlName="wifi_available"
          name="wifi_available"
          fxLayout="column"
          required
        >
          <mat-radio-button class="list-radio-button" color="primary" [value]="1">Yes</mat-radio-button>
          <mat-radio-button class="list-radio-button" color="primary" [value]="2">No</mat-radio-button>
          <mat-error *ngIf="wifiForm.controls.wifi_available.hasError('required').required && wifiForm.controls.wifi_available.touched" class="error"
            >Required field</mat-error
          >
        </mat-radio-group>
...rest of form... 
</form>

组件

ngOnInit() {
    this.wifiForm = this.fb.group({
      wifi_available: ['', Validators.required],
      wifi_deadspots: ['', Validators.required],
      wifi_notes: [''],
    });
    this.orderId = this.route.snapshot.paramMap.get('id');
    this.wifiData = this.route.snapshot.data['order_data']; <== WHERE DATA IS BROUGHT IN
    this.wifiForm.patchValue(this.wifiData); <== WHERE DATA IS PATCHED
  }

来自数据库的值[示例] { wifi_available: 1, wifi_deadspots: 1, wifi_notes: 'Lorem bacon...' }

我希望相应地检查 mat-radio-buttons（如果 1，则 "Yes" 检查）。如果我将数据库字段类型更改为 VARCHAR，则会按预期检查单选按钮。如果数据库字段是 INT（它们应该是），则不会检查任何单选按钮。

Answer 1

我加了

[checked]="wifiForm.value.wifi_available === true"

到 mat-radio-button（wifiForm 将 1/0 视为布尔值）并且这有效。

我只需要更新 html

<form class="mb-4" [formGroup]="wifiForm">
  <label id="wifi_available">Is working WiFi present on the property?</label>
  <mat-radio-group
          aria-labelledby="wifi_available"
          class="list-radio-group w-100 mb-4 mt-2"
          formControlName="wifi_available"
          name="wifi_available"
          fxLayout="column"
          required
        >
  <mat-radio-button class="list-radio-button" color="primary [checked]="wifiForm.value.wifi_available === true" value="1">Yes</mat-radio-button>
  <mat-radio-button class="list-radio-button" color="primary [checked]="wifiForm.value.wifi_available === false"value="0">No</mat-radio-button>

... </form>

这适用于我遇到同样问题的其他组件中的其他值。

将传入的整数值绑定到表单组中的 mat-radio-button 值

Bind incoming integer value to mat-radio-button value in formgroup

data-binding

radio-button

angular-material

angular

formgroups