How do you use Reactive Forms in an Angular Elements custom element?

Question

I'm trying to create an Angular Elements component to embed in a hosted web page, and I want my component to contain an Angular reactive form.

Build fails with error: "Can't bind to 'formGroup' since it isn't a known property of 'form'."

Can anyone identify what I'm doing wrong?

Edit: This is Angular 9 and TypeScript 3.7 running on the latest version of the Angular CLI. Stackblitz: https://stackblitz.com/edit/angular-57wq1s

Edit 2: The updated Stackblitz code no longer throws a compile-time error, but the control does not finish rendering. The Submit button does not render. If I remove the 'formControlName' directive from the password input, the component does render completely.

Edit 3: StackBlitz seems to be working now, but if I download to my computer, npm install and ng serve, I get the problem where it renders the textbox but not the button.

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 { }
}

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

}

OK, I added that to my app.module.ts, and I'm still getting the same error. I'll update my original code sample. — Chad
– Chad, Commented Feb 19, 2020 at 16:50
I got it into Stackblitz, but I'm not sure if it's compatible with Angular Elements. It's giving me a different error... stackblitz.com/edit/angular-fsyral — Chad
– Chad, Commented Feb 19, 2020 at 18:32

Mohamad Mousheimish · Accepted Answer · 2020-02-19 14:07:52Z

1

First Import FormsModule in your app.module.ts

You can use FormBuilder to build your form and set the password using Validators. It's easy to use and facilitate working.

Here's how I do it.

Html Page

<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: ''
});
}

Please note that you need to import FormBuilder.

Hope that helps you a little bit.

edited Feb 19, 2020 at 14:07

answered Feb 19, 2020 at 14:02

Mohamad Mousheimish

1,7234 gold badges19 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Chad Over a year ago

Thanks for the help. I refactored my code to import the FormsModule and use FormBuilder, but I'm still getting the same error.

Mohamad Mousheimish Over a year ago

can you please update you're question with the new code

Mohamad Mousheimish Over a year ago

Instead of password: [null] please make it password: [null, Validators.required] and import Validators from @angular/forms also.

Chad Over a year ago

OK, now it builds without complaining, but it doesn't render the component. Now if I inspect the HTML while the app is running, there's just  where the component is supposed to be.

Mohamad Mousheimish Over a year ago

Okay so the password text box is loading, and there's no error in the console log. What are you expecting? The Alert?

|

Collectives™ on Stack Overflow

How do you use Reactive Forms in an Angular Elements custom element?

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related