CODEWITHSUNDEEP
angular
Bluebaron
Bluebaron

Reputation: 2526

No value accessor for form control with name: 'recaptchaReactive'

Working from this example https://stackblitz.com/edit/ng-recaptcha-example?file=src%2Fapp%2Fapp.component.ts

May be related to: Angular4 - No value accessor for form control

In my form, I have the following.

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <mat-form-field class="example-full-width">
       <input matInput placeholder="{{'Email' | translate}}" formControlName="email"                                        [errorStateMatcher]="matcher">

        <mat-error *ngIf="loginForm.controls['email'].hasError('email') || loginForm.controls['email'].hasError('required')">
             {{"Enter a valid email address" | translate}}
        </mat-error>
    </mat-form-field>
    <re-captcha formControlName="recaptchaReactive"></re-captcha>
</form>

The email field (and password which I omitted) do work. In the component, I have the following.

loginForm = new FormGroup({
    email: new FormControl('', [
        Validators.email,
        Validators.required
    ]),
    password: new FormControl('', [
        Validators.required,
        Validators.minLength(8)
    ]),
    recaptchaReactive: new FormControl(null, Validators.required)
});

Upvotes: 3

Views: 5088

Answers (1)

yurzui
yurzui

Reputation: 214255

It looks like you forgot to import RecaptchaFormsModule in your NgModule:

@NgModule({
  imports: [
    RecaptchaModule,
    RecaptchaFormsModule, <== required when working with forms
  ],
  ...
})
export class AppModule { }

Upvotes: 14

Related Questions