Привязать входящее целочисленное значение к значению mat-radio-button в formgroup

Я загружаю значения целочисленного типа из базы данных для заполнения переключателей группы форм. Радиогруппа считывает значения, только если я конвертирую входящие целые числа в строки. Как заставить mat-radio-group принимать целочисленные значения?

Я пробовал изменить value="1" на [value]="1", но это не дало результата. Единственная ссылка на это, которую я смог найти, это проблема на странице github material2, здесь

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-button будут проверены соответствующим образом (если 1, то отмечено "Да"). Если я изменил тип поля db на VARCHAR, переключатели будут отмечены должным образом. Если поля db имеют значение INT (как и должно быть), то переключатели не проверяются.


angular data-binding radio-button angular-material formgroups
person cbilliau    schedule 18.04.2019    source источник
comment
если вы помещаете '[] в значение, вы пытаетесь привязать его к 1; что не имеет для него смысла, потому что если это переключатель, который ожидает логическое значение, и 1, и 2 станут истинными (только 0 считается ложным, когда числа принимаются как логические в js). Если вы хотите преобразовать целые числа в строки, попробуйте добавить их в пустую строку, которая преобразуется, например '' + myDbNum Скажите мне, помогает ли это вам   -  person Francisco Santorelli    schedule 18.04.2019
comment
Если ваши входящие данные действительно { wifi_available: 1, wifi_deadspots: 1, wifi_notes: 'Lorem bacon...' }, они должны работать с кодом, который у вас есть с использованием [value] Пожалуйста, воссоздайте проблему в stackblitz :)   -  person AJT82    schedule 18.04.2019
comment
Спасибо вам обоим за ваш вклад.   -  person cbilliau    schedule 18.04.2019
comment
Мне помогла ваша ссылка на проблему с github: github.com/angular/components/issues /. В моем случае я также не мог заставить работать привязку int к mat-radio-button. Решением было изменение value = 1 на [value] = '1'   -  person Eternal21    schedule 18.06.2021

Ответы (1)


arrow_upward
1
arrow_downward

я добавил

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

to 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>

Это работало для других значений в других компонентах, с которыми у меня была такая же проблема.

person cbilliau    schedule 18.04.2019