Как использовать setValue и getValue с использованием ion-radio в качестве компонентов

Question

Я создаю компонент с переключателями, значения которого мне нужно установить и получить при использовании этого компонента в реактивной форме. Также мне нужно иметь возможность выбрать радио по умолчанию. Каков лучший способ go об этом?

Мой радио-button.component. html:

<ion-list>
  <ion-radio-group *ngIf="orientation === 'horizontal'">
    <ion-row>
      <ion-col *ngFor="let options of items">
        <ion-item lines="none">
          <ion-label>{{ options.value }}</ion-label>
          <ion-radio
            mode="md"
            slot="start"
            [value]="options.id"
            (click)="selectOption(options)"
            [disabled]="formControlRadio.disabled"
          ></ion-radio>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-radio-group>
</ion-list>

radio-button.component.ts:

import { Component, Input, forwardRef, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
import { Orientation } from "../enums";

const TYPE_CONTROL_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => RadioButtonComponent),
  multi: true
};

@Component({
  selector: 'comp-radio-button',
  templateUrl: './radio-button.component.html',
  styleUrls: ['./radio-button.component.scss'],
  providers: [TYPE_CONTROL_ACCESSOR]
})
export class RadioButtonComponent implements OnInit, ControlValueAccessor {
  @Input() items = [{}];
  @Input() orientation = Orientation.Horizontal;
  @Input() formControlRadio: FormControl;
  constructor() { }

  ngOnInit() {

  }

  onChange: Function = () => { }
  onTouch: Function = () => { }
  value = '';

  // this method sets the value programmatically
  writeValue(obj: string) {
    this.value = obj;
  }
  // upon UI element value changes, this method gets triggered
  registerOnChange(fn: Function) {
    this.onChange = fn;
  }
  // upon touching the element, this method gets triggered
  registerOnTouched(fn: Function) {
    this.onTouch = fn;
  }
  selectOption(value: string) {
    this.value = value;
    this.onChange(value);
    this.onTouch();
    return this.value;
  }
}

app.component. html:

<some form>
<comp-radio-button
  name="radioBtn"
  [items]="radioItems"
  orientation="horizontal"
  formControlName="radio"
  [formControlRadio]="formControlRadioInput">
</comp-radio-button>

app.component.ts:

formControlRadioInput: FormControl;
  radioItems = [
    { value: 'Option 1', id: 'op1' },
    { value: 'Option 2', id: 'op2' },
    { value: 'Option 3', id: 'op3' },
    { value: 'Option 4', id: 'op4' }
  ]

Мне нужно что-то сделать в этих строках:

constructor(){
    this.formControlRadioInput = new FormControl({ value: 'op1', disabled: false }, [Validators.required]);
}

OR
 this.formControlRadioInput.setValue('op1')

Answer 1

Если вы еще не поняли, я предлагаю следующие коды:

html:

  <form [formGroup]="myForm">
<ion-radio-group (ionChange)="radioSelected($event)" formControlName="myRadio">
  <ion-item lines="none" *ngFor="let r of radioItems;">
      <ion-label>{{r.value}}</ion-label>
      <ion-radio slot="start" value="{{r.id}}"></ion-radio>
  </ion-item>

angular :

    myForm: FormGroup;

    this.myForm = new FormGroup({
      myRadio: new FormControl('op2', [Validators.required]),
    });

    this.radioItems = [
    { value: 'Option 1', id: 'op1' },
    { value: 'Option 2', id: 'op2' },
    { value: 'Option 3', id: 'op3' },
    { value: 'Option 4', id: 'op4' }
  ]

Надеюсь, это поможет, ура.