Привязать входящее целочисленное значение к значению переключателя mat в группе форм - PullRequest
Новая
       39

Привязать входящее целочисленное значение к значению переключателя mat в группе форм

0 голосов
/ 18 апреля 2019

Я загружаю значения целочисленного типа из БД, чтобы заполнить переключатели формгруппы.Радиогруппа считывает значения только в том случае, если я преобразовываю входящие целые числа в строки.Как заставить 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
  }

Значенияисходя из db [пример] {wifi_available: 1, wifi_deadspots: 1, wifi_notes: 'Lorem bacon ...'}

Я ожидаю, что мат-радио-кнопки будут проверены соответствующим образом (если 1, то«Да» проверил).Если я изменил тип поля db на VARCHAR, переключатели проверяются, как и ожидалось.Если в полях db указано INT (как и должно быть), то переключатели не проверяются.

1 Ответ

0 голосов
/ 18 апреля 2019

Я добавил

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

к мат-радио-кнопке (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>

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

...