0

I have created custom text component for textbox and i am trying to validate by reactive form validation but not working.

Getting Error:

ERROR Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).

Anyone can help to resolve this issue?

https://stackblitz.com/edit/angular-6-reactive-form-validation-9pu6hq?file=app%2Fapp.component.html

app.component.html:

<app-textbox formControlName="password"></app-textbox>

app.component.ts:

this.registerForm = this.formBuilder.group({
        firstName: ['', Validators.required],
        password: ['', [Validators.required, Validators.minLength(6)]]
    });
cinnan
  • 97
  • 2
  • 12

1 Answers1

0

You need to put the app-textbox in between a form element that is assigned to the form group:

   <form [group]="registerForm">
      <app-textbox formControlName="password"></app-textbox>
   </form>
Simon
  • 194
  • 13
  • How it is possible? Bcoz already i have used app-textbox inside the form..Can you check app.component? – cinnan Mar 06 '19 at 12:09
  • ah sorry, didn't see that. I guess this could help: https://stackoverflow.com/a/45660571/10713841 You cant just use your own components as a form control. – Simon Mar 06 '19 at 13:18
  • I have checked but not working..Can you check this code:https://stackblitz.com/edit/angular-eac5pk?file=src%2Fapp%2Fapp.component.html – cinnan Mar 07 '19 at 09:43