gpt4 book ai didi

模板和 react 形式的 Angular 自定义组件

转载 作者:行者123 更新时间:2023-12-05 07:03:47 26 4
gpt4 key购买 nike

我正在尝试创建一个自定义组件(一个自定义的自动完成字段),但我想同时处理响应式(Reactive)表单和模板表单所以有时值会来自 [(ngModel)] 有时我想提供 formControlName

到目前为止,我有 2 个不同的模板,但在我看来,似乎 NG_VALUE_ACCESSOR 正在自行处理它,我的实现中缺少一些东西。

为了让我的问题更清楚如果您使用 PrimeNg 组件或任何框架,相同的组件可以采用 [(ngModel)] 或 formControlName 并且在这两种情况下它都像普通组件一样运行而无需特殊处理,这就是我想要做的

相同问题的类似问题:

How to wrap a primeng component like autocomplete using reactive forms?

最佳答案

这是一个老问题,但我一直在努力解决同样的问题。以防万一有人遇到这个问题,以下是我如何解释所问内容以及我的解决方案。

我的组件需要能够接收 [value] 并发出一些 (output),同时还能够简单地接收 formControlName。我也需要解决这个问题。使用以下示例:

<my-button-toggle formControlName="toggleValue"></my-button-toggle>

<my-button-toggle
value="A"
(toggleChange)="handleChange($event)"
></my-button-toggle>

我为此纠结了一段时间,但在看了this repo 之后它终于让我满意了。

这是我包装的按钮切换组件的 html 结构

<mat-button-toggle-group
[disabled]="disabled"
[multiple]="multiple"
[vertical]="vertical"
[value]="value"
(change)="doChange($event)">
...

并且在 ts 中,我们允许 formControlName 以及值设置:

export interface ToggleItem {
disabled?: boolean
value?: any
label: string
}

@Component({
selector: 'my-button-toggle',
templateUrl: './button-toggle.component.html',
styleUrls: ['./button-toggle.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: ButtonToggleComponent,
multi: true,
},
],
})
export class ButtonToggleComponent implements ControlValueAccessor {
@Input() value: any = ''
@Input() disabled = false
@Input() multiple = false
@Input() vertical = false
@Input() toggles: ToggleItem[] = []
@Output() toggleChange = new EventEmitter<any>()

onChange = (value: any) => {}
onTouched = () => {}

writeValue(value: string): void {
this.value = value
}

registerOnChange(fn: any): void {
this.onChange = fn
}

registerOnTouched(fn: any): void {
this.onTouched = fn
}

setDisabledState?(isDisabled: boolean): void {
this.disabled = isDisabled
}

doChange = (x: MatButtonToggleChange) => {
this.value = x.value
this.onChange(x.value)
this.toggleChange.emit(x.value)
}
}

所以,发生的事情是,当触发按钮切换的 (change) 事件时,它会在内部调用 this.onChange,这由 ControlValueAccessor 处理,但随后我告诉我的自定义输出发出值,以便任何其他类型的非响应式(Reactive)用例仍然可以与组件对话。

关于模板和 react 形式的 Angular 自定义组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63130505/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com