以 Angular 反应形式使用 lit-element Web 组件答案

【问题标题】：Use lit-element web component in Angular reactive form以 Angular 反应形式使用 lit-element Web 组件
【发布时间】：2022-07-08 01:12:38
【问题描述】：

我创建了一个包含<input type="text"> 的lit-element Web 组件。其实我只是扩展了LionInput。

import { InputMixin } from '@core/mixin/form/InputMixin';
import { customElement} from '@lion/core';
import { LionInput } from '@lion/input';

@customElement('ds-input')
export class DSInput extends InputMixin(LionInput) {}

在我的 Angular 应用的 app.module 中，我添加了 schemas 属性：

schemas: [CUSTOM_ELEMENTS_SCHEMA],

如下图所示，<my-input> 在我的 Angular Reative 表单中被识别为 Web 组件

问题是当我尝试在我的 Web 组件中访问 <input> 时：

<form [formGroup]="myForm">
   <ds-input [formControlName]="'name'"></ds-input> 
</form>

我得到错误：

 'ERROR Error: No value accessor for form control with name: 'name'

我完全理解错误的原因，但我不明白如何解决它，如何让Angular到达<ds-input>里面的<input> 我没有找到太多关于如何在 Angular 应用程序中集成 litElement Web 组件的文档。

【问题讨论】：

标签： angular web-component lit-element lit

【解决方案1】：

错误说您对名为“name”的控件没有任何控件。所以你可以尝试这样做

试试这是你的html

<form [formGroup]="myForm">
   <ds-input [formControl]="name"></ds-input> 
</form>

在你的打字稿中：

public formGroup : FormGroup;
public nameFC : FormControl = new FormControl();

this.formGroup = new FormGroup({
    name: this.nameFC
})

【讨论】：