如何在 Angular Elements 自定义元素中使用响应式表单？答案

【问题标题】：How do you use Reactive Forms in an Angular Elements custom element?如何在 Angular Elements 自定义元素中使用响应式表单？
【发布时间】：2020-06-03 17:02:36
【问题描述】：

我正在尝试创建一个 Angular Elements 组件以嵌入到托管网页中，并且我希望我的组件包含一个 Angular 响应式表单。

构建失败并出现错误：“无法绑定到 'formGroup'，因为它不是 'form' 的已知属性。”

谁能指出我做错了什么？

编辑：这是在最新版本的 Angular CLI 上运行的 Angular 9 和 TypeScript 3.7。 Stackblitz：https://stackblitz.com/edit/angular-57wq1s

编辑 2：更新后的 Stackblitz 代码不再引发编译时错误，但控件未完成渲染。提交按钮不呈现。如果我从密码输入中删除“formControlName”指令，组件确实会完全呈现。

编辑 3：StackBlitz 似乎现在可以工作了，但是如果我下载到我的计算机，npm install 和 ng serve，我会遇到问题，它呈现文本框而不是按钮。

Index.html

<!doctype html>
<html lang="en">
<body>
  <app-password-reset></app-password-reset>
</body>
</html>

app.module.ts

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  entryComponents: [PasswordResetComponent],
  providers: [],
})
export class AppModule {
  constructor(injector: Injector) {
    const passwordResetElement = createCustomElement(PasswordResetComponent, {injector});
    customElements.define('app-password-reset', passwordResetElement);
  }

  ngDoBootstrap(): void { }
}

密码重置.component.ts

@Component({
  template: `
    <form [formGroup]="resetForm" (ngSubmit)="formSubmit($event)">
      <input type="password" formControlName="password">
      <button type="submit">Reset Password</button>
    </form>`
})
export class PasswordResetComponent {

  constructor(private fb: FormBuilder) { }

  resetForm = this.fb.group({
    password: [null, Validators.required],
  });

  formSubmit(event: Event) {
    alert('it works');
  }

}

【问题讨论】：

我觉得你还需要导入FormsModule
好的，我将它添加到我的 app.module.ts 中，但我仍然遇到同样的错误。我将更新我的原始代码示例。
你能在stackblitz.com创建这个项目吗？
我将它放入 Stackblitz，但我不确定它是否与 Angular Elements 兼容。它给了我一个不同的错误...stackblitz.com/edit/angular-fsyral
@SatishPai -- 忘记标记你

标签： angular angular-elements

【解决方案1】：

首先在您的app.module.ts 中导入FormsModule

您可以使用FormBuilder 来构建您的表单并使用Validators 设置密码。它易于使用且便于工作。

这就是我的做法。

HTML 页面

<form [formGroup]='addEventForm' (ngSubmit)='addEvent(addEventForm.value)'>
</form>

Component.ts

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

addEventForm: FormGroup;
  constructor(formBuilder: FormBuilder) {
this.addEventForm = formBuilder.group({
  title: [null, Validators.required],
  location: [null, Validators.required],
  description: [null, Validators.required],
  startDateValue: [null, Validators.required],
  endDateValue: [null, Validators.required],
  startTime: [null, Validators.required],
  endTime: [null, Validators.required],
  eventType: ['payed'],
  price: ''
});
}

请注意，您需要导入FormBuilder。

希望对你有所帮助。

【讨论】：

感谢您的帮助。我重构了我的代码以导入 FormsModule 并使用 FormBuilder，但我仍然遇到同样的错误。
能否用新代码更新您的问题
请将password: [null]改为password: [null, Validators.required]并从@angular/forms导入Validators。
好的，现在它可以毫无问题地构建，但它不会渲染组件。现在，如果我在应用程序运行时检查 HTML，则只有组件应该在的位置。
好的，密码文本框正在加载，控制台日志中没有错误。你在期待什么？警报？