angular - 如何将 setValue 和 getValue 与 ion-radio 一起用作组件
问题描述
我正在创建一个带有单选按钮的组件,在以反应形式使用此组件时,我需要设置和获取其值。我还需要能够选择默认收音机。解决此问题的最佳方法是什么?
我的 radio-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>
单选按钮.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')
解决方案
如果您还没有弄清楚这一点,我建议您使用以下代码;
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>
角度:
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' }
]
希望这会有所帮助,干杯。
推荐阅读
- python - 韦尔奇方法应用 Parsevals 定理
- symfony - Symfony - ID 和用户友好的路由
- swift - Xcode swift UI 测试对比两张截图
- parallel-processing - Jenkins 管道文件中的并行 MSBuild 失败
- mysql - 内部连接中的mysql语法错误
- ios - retryWhen 未按预期重新订阅源
- c# - 如何在 xamarin.forms 中使用将 Viewmodels 绑定到 bottomTabbed Viewpages?
- python - Python 我所有的键都使用相同的值
- html - 将 XPath 用于类和其他属性值吗?
- .net - Microsoft Owin 在本地打破 VS