Как вы используете Reactive Forms в пользовательском элементе Angular Elements? - PullRequest
Новая
       8

Как вы используете Reactive Forms в пользовательском элементе Angular Elements?

0 голосов
/ 19 февраля 2020

Я пытаюсь создать компонент Angular Elements для встраивания в размещенную веб-страницу, и я хочу, чтобы мой компонент содержал реактивную форму Angular.

Сборка завершается неудачно с ошибкой: «Невозможно выполнить привязку к« formGroup », поскольку она не известна свойству« form »».

Кто-нибудь может определить, что я делаю неправильно?

Редактировать: Это Angular 9 и TypeScript 3.7, работающие на последней версии Angular CLI. Stackblitz: https://stackblitz.com/edit/angular-57wq1s

Редактировать 2: обновленный код Stackblitz больше не вызывает ошибку времени компиляции, но элемент управления не завершает sh рендеринг. Кнопка «Отправить» не отображается. Если я удаляю директиву formControlName из ввода пароля, компонент выполняет полностью.

Edit 3: StackBlitz, кажется, работает сейчас, но если я загружаю на свой компьютер, npm установка и ng serve, я получаю проблему, когда он отображает текстовое поле, но не кнопку.

Индекс. 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 { }
}

password-reset.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');
  }

}

1 Ответ

2 голосов
/ 19 февраля 2020

Первый импорт FormsModule в вашем app.module.ts

Вы можете использовать FormBuilder для создания формы и установить пароль, используя Validators. Он прост в использовании и облегчает работу.

Вот как я это делаю.

Html Страница 

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

Компонент. 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.

Надеюсь, что вам это немного поможет.

...