angular - 如何创建自定义响应式表单元素?
问题描述
我正在使用 Angular 中的反应式表单,我正在尝试创建一个自定义表单元素,以便我可以在表单中使用按钮。我正在尝试遵循Alligator.io的教程,但不清楚如何将其集成到我的组件中。目前我收到以下错误。
ERROR Error: No value accessor for form control with name: 'coverage_for_domestic_partners'
以下是我的代码,任何帮助将不胜感激。
// HTML
<div class="button-group" [formGroup]="group">
<button
*ngFor="let option of config.options"
class="button button--toggle"
[ngClass]='{"is-active": option.selected}'
(click)="select($event, option)"
[formControlName]="config.key">
<div class="button-content">{{option.key}}</div>
</button>
</div>
// 零件
import { Component, OnInit, Input, forwardRef, HostBinding } from '@angular/core';
import { FormGroup, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'z-toggle-group',
templateUrl: './z-toggle-group.component.html',
styleUrls: ['./z-toggle-group.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ZToggleGroupComponent),
multi: true
}
]
})
export class ZToggleGroupComponent implements OnInit, ControlValueAccessor {
@Input() config;
@Input() group: FormGroup;
@Input() disabled = false;
@HostBinding('style.opacity')
get opacity() {
return this.disabled ? 0.25 : 1;
}
clicked;
onChange = (rating: number) => {};
onTouched = () => {};
constructor() { }
ngOnInit() {
// console.log('form', this.group)
this.group.get(this.config.key).valueChanges.subscribe(value => {
console.log('formValue', value);
})
}
writeValue(obj: any): void {
throw new Error("Method not implemented.");
}
registerOnChange(fn: any): void {
throw new Error("Method not implemented.");
}
registerOnTouched(fn: any): void {
throw new Error("Method not implemented.");
}
setDisabledState?(isDisabled: boolean): void {
throw new Error("Method not implemented.");
}
select($event, option) {
this.clicked = $event;
this.group.get(this.config.key).patchValue(option.value, {onlySelf: true});
this.config.options.forEach(option => {
option.selected = false;
})
option.selected = true;
}
}
解决方案
您需要实现ControlValueAccessor接口,为此,您需要实现以下方法:
interface ControlValueAccessor {
writeValue(obj: any): void
registerOnChange(fn: any): void
registerOnTouched(fn: any): void
setDisabledState(isDisabled: boolean)?: void
}
您可以在此处查看我的示例实现。
当组件的值发生变化时,您必须调用OnChange
您在 ts 文件中注册的方法。
您可以在此处查看我的调用示例。
之后,您可以通过其标签选择器(在您的情况下z-toggle-group
)在表单中使用您的组件,并且您将能够使用formControlName
.
<div class="button-group" [formGroup]="group">
<button
*ngFor="let option of config.options"
class="button button--toggle"
[ngClass]='{"is-active": option.selected}'
(click)="select($event, option)">
<z-toggle-group [formControlName]="config.key"></z-toggle-group>
<div class="button-content">{{option.key}}</div>
</button>
</div>
这是您的代码工作。
推荐阅读
- sql - SQL:运行总出现次数
- javascript - 如何在框架集中的 iframe 中更改 CSS
- react-native - React-Native 启动画面控制时间
- android - 我的应用无法连接到网络服务
- google-apis-explorer - 创建期间 Playcustomapp API 异常
- javascript - 将 jquery 元素对象转换为 json 时超出最大调用堆栈大小错误
- php - 不允许使用函数调用作为默认值的目的是什么?
- java - 通过将其属性/属性与字符串进行比较来检查对象列表是否已存在
- c++ - 队列数组指针 (C++)
- angularjs - 如何从输入类型时间中排除秒数?